diff --git a/gradle.properties b/gradle.properties
index ff79c6f392d..c5378a66c3f 100644
--- a/gradle.properties
+++ b/gradle.properties
@@ -19,7 +19,7 @@
 
 # TODO:  Change to org.apereo.portal
 group=org.jasig.portal
-version=6.0.0-SNAPSHOT
+version=6.0.0-SNAPSHOT-BS
 
 # Project Metadata (NB:  copied from CAS;  may or may not be used by us;  review later)
 projectUrl=https://www.apereo.org/projects/uPortal
@@ -94,7 +94,7 @@ oauthVersion=20100527
 orgJsonVersion=20250107
 personDirectoryVersion=1.8.16
 plutoVersion=2.1.0-M3
-resourceServerVersion=1.3.1
+resourceServerVersion=1.5.1-SNAPSHOT
 slf4jVersion=1.7.36
 springVersion=4.3.30.RELEASE
 springSessionVersion=1.3.5.RELEASE
@@ -113,7 +113,7 @@ xmlunitVersion=2.10.0
 xstreamVersion=1.4.21
 
 # webjar versions
-bootstrapVersion=3.4.1
+bootstrapVersion=5.3.8
 coreJsBundleVersion=3.40.0
 regeneratorRuntimeVersion=0.14.1
 jstreeVersion=3.3.17
diff --git a/package-lock.json b/package-lock.json
index d7459ff7632..f32150070dd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,14 +16,14 @@
         "eslint-plugin-sonarjs": "^1.0.0",
         "eslint-plugin-unicorn": "^55.0.0",
         "globals": "^15.1.0",
-        "postcss-less": "^6.0.0",
+        "postcss-scss": "^4.0.9",
         "prettier": "~3.5.0",
         "remark-cli": "^12.0.0",
         "remark-preset-lint-consistent": "^6.0.0",
         "remark-preset-lint-recommended": "^7.0.0",
         "remark-validate-links": "^13.0.0",
         "stylelint": "^16.0.0",
-        "stylelint-config-standard-less": "^3.0.0",
+        "stylelint-config-standard-scss": "^13.1.0",
         "stylelint-prettier": "^5.0.0"
       }
     },
@@ -632,6 +632,316 @@
         "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
+    "node_modules/@parcel/watcher": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
+      "integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^1.0.3",
+        "is-glob": "^4.0.3",
+        "micromatch": "^4.0.5",
+        "node-addon-api": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher-android-arm64": "2.5.1",
+        "@parcel/watcher-darwin-arm64": "2.5.1",
+        "@parcel/watcher-darwin-x64": "2.5.1",
+        "@parcel/watcher-freebsd-x64": "2.5.1",
+        "@parcel/watcher-linux-arm-glibc": "2.5.1",
+        "@parcel/watcher-linux-arm-musl": "2.5.1",
+        "@parcel/watcher-linux-arm64-glibc": "2.5.1",
+        "@parcel/watcher-linux-arm64-musl": "2.5.1",
+        "@parcel/watcher-linux-x64-glibc": "2.5.1",
+        "@parcel/watcher-linux-x64-musl": "2.5.1",
+        "@parcel/watcher-win32-arm64": "2.5.1",
+        "@parcel/watcher-win32-ia32": "2.5.1",
+        "@parcel/watcher-win32-x64": "2.5.1"
+      }
+    },
+    "node_modules/@parcel/watcher-android-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz",
+      "integrity": "sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.1.tgz",
+      "integrity": "sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.1.tgz",
+      "integrity": "sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-freebsd-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.1.tgz",
+      "integrity": "sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.1.tgz",
+      "integrity": "sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.1.tgz",
+      "integrity": "sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.1.tgz",
+      "integrity": "sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.1.tgz",
+      "integrity": "sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.1.tgz",
+      "integrity": "sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.1.tgz",
+      "integrity": "sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.1.tgz",
+      "integrity": "sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-ia32": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.1.tgz",
+      "integrity": "sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.1.tgz",
+      "integrity": "sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -1181,18 +1491,6 @@
         "typedarray": "^0.0.6"
       }
     },
-    "node_modules/copy-anything": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz",
-      "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
-      "dev": true,
-      "dependencies": {
-        "is-what": "^3.14.1"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/mesqueeb"
-      }
-    },
     "node_modules/core-js-compat": {
       "version": "3.37.1",
       "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.37.1.tgz",
@@ -1330,6 +1628,20 @@
         "node": ">=6"
       }
     },
+    "node_modules/detect-libc": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+      "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "bin": {
+        "detect-libc": "bin/detect-libc.js"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/devlop": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
@@ -1384,19 +1696,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/errno": {
-      "version": "0.1.8",
-      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
-      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "prr": "~1.0.1"
-      },
-      "bin": {
-        "errno": "cli.js"
-      }
-    },
     "node_modules/error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -1973,13 +2272,6 @@
       "integrity": "sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==",
       "dev": true
     },
-    "node_modules/graceful-fs": {
-      "version": "4.2.11",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
-      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-      "dev": true,
-      "optional": true
-    },
     "node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -2019,19 +2311,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/iconv-lite": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
-      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -2042,18 +2321,12 @@
         "node": ">= 4"
       }
     },
-    "node_modules/image-size": {
-      "version": "0.5.5",
-      "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
-      "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
+    "node_modules/immutable": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.4.tgz",
+      "integrity": "sha512-p6u1bG3YSnINT5RQmx/yRZBpenIl30kVxkTLDyHLIMk0gict704Q9n+thfDI7lTRm9vXdDYutVzXhzcThxTnXA==",
       "dev": true,
-      "optional": true,
-      "bin": {
-        "image-size": "bin/image-size.js"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
+      "license": "MIT"
     },
     "node_modules/import-fresh": {
       "version": "3.3.0",
@@ -2264,12 +2537,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/is-what": {
-      "version": "3.14.1",
-      "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz",
-      "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
-      "dev": true
-    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -2385,32 +2652,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/less": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/less/-/less-4.2.0.tgz",
-      "integrity": "sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==",
-      "dev": true,
-      "dependencies": {
-        "copy-anything": "^2.0.1",
-        "parse-node-version": "^1.0.1",
-        "tslib": "^2.3.0"
-      },
-      "bin": {
-        "lessc": "bin/lessc"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "optionalDependencies": {
-        "errno": "^0.1.1",
-        "graceful-fs": "^4.1.2",
-        "image-size": "~0.5.0",
-        "make-dir": "^2.1.0",
-        "mime": "^1.4.1",
-        "needle": "^3.1.0",
-        "source-map": "~0.6.0"
-      }
-    },
     "node_modules/levenshtein-edit-distance": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/levenshtein-edit-distance/-/levenshtein-edit-distance-1.0.0.tgz",
@@ -2491,30 +2732,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/make-dir": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
-      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "pify": "^4.0.1",
-        "semver": "^5.6.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/make-dir/node_modules/semver": {
-      "version": "5.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
-      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
-      "dev": true,
-      "optional": true,
-      "bin": {
-        "semver": "bin/semver"
-      }
-    },
     "node_modules/markdown-extensions": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/markdown-extensions/-/markdown-extensions-2.0.0.tgz",
@@ -3450,19 +3667,6 @@
         "node": ">=8.6"
       }
     },
-    "node_modules/mime": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
-      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
-      "dev": true,
-      "optional": true,
-      "bin": {
-        "mime": "cli.js"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/min-indent": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
@@ -3532,22 +3736,13 @@
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
       "dev": true
     },
-    "node_modules/needle": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/needle/-/needle-3.3.1.tgz",
-      "integrity": "sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==",
+    "node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
       "dev": true,
-      "optional": true,
-      "dependencies": {
-        "iconv-lite": "^0.6.3",
-        "sax": "^1.2.4"
-      },
-      "bin": {
-        "needle": "bin/needle"
-      },
-      "engines": {
-        "node": ">= 4.4.x"
-      }
+      "license": "MIT",
+      "optional": true
     },
     "node_modules/node-releases": {
       "version": "2.0.14",
@@ -3716,15 +3911,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/parse-node-version": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz",
-      "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -3802,16 +3988,6 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/pify": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
-      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/pluralize": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-8.0.0.tgz",
@@ -3850,17 +4026,12 @@
         "node": "^10 || ^12 || >=14"
       }
     },
-    "node_modules/postcss-less": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-less/-/postcss-less-6.0.0.tgz",
-      "integrity": "sha512-FPX16mQLyEjLzEuuJtxA8X3ejDLNGGEG503d2YGZR5Ask1SpDN8KmZUMpzCvyalWRywAn1n1VOA5dcqfCLo5rg==",
+    "node_modules/postcss-media-query-parser": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz",
+      "integrity": "sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==",
       "dev": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "peerDependencies": {
-        "postcss": "^8.3.5"
-      }
+      "license": "MIT"
     },
     "node_modules/postcss-resolve-nested-selector": {
       "version": "0.1.6",
@@ -3896,6 +4067,33 @@
         "postcss": "^8.4.31"
       }
     },
+    "node_modules/postcss-scss": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.9.tgz",
+      "integrity": "sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss-scss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.29"
+      }
+    },
     "node_modules/postcss-selector-parser": {
       "version": "6.1.2",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
@@ -3971,13 +4169,6 @@
         "levenshtein-edit-distance": "^1.0.0"
       }
     },
-    "node_modules/prr": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
-      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
-      "dev": true,
-      "optional": true
-    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -8882,19 +9073,56 @@
         }
       ]
     },
-    "node_modules/safer-buffer": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+    "node_modules/sass": {
+      "version": "1.94.2",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.94.2.tgz",
+      "integrity": "sha512-N+7WK20/wOr7CzA2snJcUSSNTCzeCGUTFY3OgeQP3mZ1aj9NMQ0mSTXwlrnd89j33zzQJGqIN52GIOmYrfq46A==",
       "dev": true,
-      "optional": true
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^4.0.0",
+        "immutable": "^5.0.2",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher": "^2.4.1"
+      }
     },
-    "node_modules/sax": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz",
-      "integrity": "sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==",
+    "node_modules/sass/node_modules/chokidar": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
       "dev": true,
-      "optional": true
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/sass/node_modules/readdirp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
     },
     "node_modules/semver": {
       "version": "7.6.2",
@@ -8969,16 +9197,6 @@
         "url": "https://github.com/chalk/slice-ansi?sponsor=1"
       }
     },
-    "node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/source-map-js": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
@@ -9219,20 +9437,23 @@
         "stylelint": "^16.1.0"
       }
     },
-    "node_modules/stylelint-config-recommended-less": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/stylelint-config-recommended-less/-/stylelint-config-recommended-less-3.0.1.tgz",
-      "integrity": "sha512-4vp9Z+W0KwxgPL4L3WxXtlMurfen0NXKFFxPHzDYn2s6WVS26Gg7jt3FIO4ZLM1x8WalCR02nwK2h0TH/mafBg==",
+    "node_modules/stylelint-config-recommended-scss": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-14.1.0.tgz",
+      "integrity": "sha512-bhaMhh1u5dQqSsf6ri2GVWWQW5iUjBYgcHkh7SgDDn92ijoItC/cfO/W+fpXshgTQWhwFkP1rVcewcv4jaftRg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "postcss-less": "^6.0.0",
-        "stylelint-config-recommended": "^14.0.0",
-        "stylelint-less": "^3.0.1"
+        "postcss-scss": "^4.0.9",
+        "stylelint-config-recommended": "^14.0.1",
+        "stylelint-scss": "^6.4.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
       },
       "peerDependencies": {
         "postcss": "^8.3.3",
-        "stylelint": "^16.0.2"
+        "stylelint": "^16.6.1"
       },
       "peerDependenciesMeta": {
         "postcss": {
@@ -9240,35 +9461,22 @@
         }
       }
     },
-    "node_modules/stylelint-config-standard": {
-      "version": "35.0.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-35.0.0.tgz",
-      "integrity": "sha512-JyQrNZk2BZwVKFauGGxW2U6RuhIfQ4XoHHo+rBzMHcAkLnwI/knpszwXjzxiMgSfcxbZBckM7Vq4LHoANTR85g==",
+    "node_modules/stylelint-config-standard-scss": {
+      "version": "13.1.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-standard-scss/-/stylelint-config-standard-scss-13.1.0.tgz",
+      "integrity": "sha512-Eo5w7/XvwGHWkeGLtdm2FZLOMYoZl1omP2/jgFCXyl2x5yNz7/8vv4Tj6slHvMSSUNTaGoam/GAZ0ZhukvalfA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "stylelint-config-recommended": "^14.0.0"
+        "stylelint-config-recommended-scss": "^14.0.0",
+        "stylelint-config-standard": "^36.0.0"
       },
       "engines": {
         "node": ">=18.12.0"
       },
-      "peerDependencies": {
-        "stylelint": "^16.0.0"
-      }
-    },
-    "node_modules/stylelint-config-standard-less": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/stylelint-config-standard-less/-/stylelint-config-standard-less-3.0.1.tgz",
-      "integrity": "sha512-l6UrXbfy37hWbeOCYrJqnKzhiy5+rkxHNGNufvyhH2K1KpEWO+lO8YrLzoOTx0VyGMatPQlpR8EXrnLRcEcvhg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "stylelint-config-recommended-less": "^3.0.1",
-        "stylelint-config-standard": "^35.0.0"
-      },
       "peerDependencies": {
         "postcss": "^8.3.3",
-        "stylelint": "^16.0.2"
+        "stylelint": "^16.3.1"
       },
       "peerDependenciesMeta": {
         "postcss": {
@@ -9276,19 +9484,30 @@
         }
       }
     },
-    "node_modules/stylelint-less": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/stylelint-less/-/stylelint-less-3.0.1.tgz",
-      "integrity": "sha512-6GkZ4jhmReXxX61IiNaniZFuyTzYTTC4HvRLNNok883d1ux/wUodM1uik+iAHZM1VSCwNASaj0Th6ZX46WZLMw==",
+    "node_modules/stylelint-config-standard-scss/node_modules/stylelint-config-standard": {
+      "version": "36.0.1",
+      "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-36.0.1.tgz",
+      "integrity": "sha512-8aX8mTzJ6cuO8mmD5yon61CWuIM4UD8Q5aBcWKGSf6kg+EC3uhB+iOywpTK4ca6ZL7B49en8yanOFtUW0qNzyw==",
       "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/stylelint"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/stylelint"
+        }
+      ],
       "license": "MIT",
       "dependencies": {
-        "postcss-resolve-nested-selector": "^0.1.1",
-        "postcss-value-parser": "4.2.0"
+        "stylelint-config-recommended": "^14.0.1"
+      },
+      "engines": {
+        "node": ">=18.12.0"
       },
       "peerDependencies": {
-        "postcss": "^8.4.31",
-        "stylelint": "^16.0.2"
+        "stylelint": "^16.1.0"
       }
     },
     "node_modules/stylelint-prettier": {
@@ -9308,6 +9527,78 @@
         "stylelint": ">=16.0.0"
       }
     },
+    "node_modules/stylelint-scss": {
+      "version": "6.12.1",
+      "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-6.12.1.tgz",
+      "integrity": "sha512-UJUfBFIvXfly8WKIgmqfmkGKPilKB4L5j38JfsDd+OCg2GBdU0vGUV08Uw82tsRZzd4TbsUURVVNGeOhJVF7pA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "css-tree": "^3.0.1",
+        "is-plain-object": "^5.0.0",
+        "known-css-properties": "^0.36.0",
+        "mdn-data": "^2.21.0",
+        "postcss-media-query-parser": "^0.2.3",
+        "postcss-resolve-nested-selector": "^0.1.6",
+        "postcss-selector-parser": "^7.1.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "peerDependencies": {
+        "stylelint": "^16.0.2"
+      }
+    },
+    "node_modules/stylelint-scss/node_modules/css-tree": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.1.0.tgz",
+      "integrity": "sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.12.2",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/stylelint-scss/node_modules/css-tree/node_modules/mdn-data": {
+      "version": "2.12.2",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.12.2.tgz",
+      "integrity": "sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/stylelint-scss/node_modules/known-css-properties": {
+      "version": "0.36.0",
+      "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.36.0.tgz",
+      "integrity": "sha512-A+9jP+IUmuQsNdsLdcg6Yt7voiMF/D4K83ew0OpJtpu+l34ef7LaohWV0Rc6KNvzw6ZDizkqfyB5JznZnzuKQA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/stylelint-scss/node_modules/mdn-data": {
+      "version": "2.25.0",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.25.0.tgz",
+      "integrity": "sha512-T2LPsjgUE/tgMmRXREVmwsux89DwWfNjiynOeXuLd2mX6jphGQ2YE3Ukz7LQ2VOFKiVZU/Ee1GqzHiipZCjymw==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/stylelint-scss/node_modules/postcss-selector-parser": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.1.tgz",
+      "integrity": "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/stylelint/node_modules/ansi-regex": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
@@ -10478,7 +10769,7 @@
     "uPortal-webapp": {
       "name": "uportal-webapp",
       "devDependencies": {
-        "less": "^4.2.0"
+        "sass": "^1.77.0"
       }
     }
   }
diff --git a/package.json b/package.json
index 70cc07aaa67..15e712c24ff 100644
--- a/package.json
+++ b/package.json
@@ -9,14 +9,14 @@
     "eslint-plugin-sonarjs": "^1.0.0",
     "eslint-plugin-unicorn": "^55.0.0",
     "globals": "^15.1.0",
-    "postcss-less": "^6.0.0",
+    "postcss-scss": "^4.0.9",
     "prettier": "~3.5.0",
     "remark-cli": "^12.0.0",
     "remark-preset-lint-consistent": "^6.0.0",
     "remark-preset-lint-recommended": "^7.0.0",
     "remark-validate-links": "^13.0.0",
     "stylelint": "^16.0.0",
-    "stylelint-config-standard-less": "^3.0.0",
+    "stylelint-config-standard-scss": "^13.1.0",
     "stylelint-prettier": "^5.0.0"
   },
   "workspaces": [
@@ -24,10 +24,10 @@
   ],
   "scripts": {
     "lint-js": "eslint . --report-unused-disable-directives --max-warnings 0",
-    "lint-less": "stylelint **/*.less !**/bootstrap/**/*.less !**/build/**/*.less",
+    "lint-scss": "stylelint **/*.scss !**/bootstrap/**/*.scss !**/build/**/*.scss",
     "lint-md": "remark -f *.md docs/**",
     "format-js": "npm run lint-js -- --fix",
-    "format-less": "npm run lint-less -- --fix"
+    "format-scss": "npm run lint-scss -- --fix"
   },
   "remarkConfig": {
     "plugins": [
@@ -36,16 +36,16 @@
     ]
   },
   "stylelint": {
-    "customSyntax": "postcss-less",
+    "customSyntax": "postcss-scss",
     "extends": [
-      "stylelint-config-standard-less",
+      "stylelint-config-standard-scss",
       "stylelint-prettier/recommended"
     ],
     "rules": {
       "at-rule-no-unknown": null,
       "declaration-block-no-shorthand-property-overrides": null,
       "function-no-unknown": null,
-      "less/no-duplicate-variables": null,
+      "scss/no-duplicate-dollar-variables": null,
       "media-feature-range-notation": [
         "prefix"
       ],
diff --git a/uPortal-api/uPortal-api-internal/src/main/java/org/apereo/portal/portlets/groupadmin/GroupAdministrationHelper.java b/uPortal-api/uPortal-api-internal/src/main/java/org/apereo/portal/portlets/groupadmin/GroupAdministrationHelper.java
index a42b07fcc33..e56a7967d38 100644
--- a/uPortal-api/uPortal-api-internal/src/main/java/org/apereo/portal/portlets/groupadmin/GroupAdministrationHelper.java
+++ b/uPortal-api/uPortal-api-internal/src/main/java/org/apereo/portal/portlets/groupadmin/GroupAdministrationHelper.java
@@ -57,11 +57,26 @@ public void setGroupListHelper(IGroupListHelper groupListHelper) {
      */
     public GroupForm getGroupForm(String key) {
 
+        if (key == null) {
+            log.error("ERROR: getGroupForm called with null key!");
+            throw new IllegalArgumentException("Group key cannot be null");
+        }
+
+        if (key.isEmpty()) {
+            log.error("ERROR: getGroupForm called with empty key!");
+            throw new IllegalArgumentException("Group key cannot be empty");
+        }
+
         log.debug("Initializing group form for group key " + key);
 
         // find the current version of this group entity
         IEntityGroup group = GroupService.findGroup(key);
 
+        if (group == null) {
+            log.error("ERROR: GroupService.findGroup returned null for key: [" + key + "]");
+            throw new IllegalArgumentException("No group found for key: " + key);
+        }
+
         // update the group form with the existing group's main information
         GroupForm form = new GroupForm();
         form.setKey(key);
diff --git a/uPortal-utils/uPortal-utils-core/build.gradle b/uPortal-utils/uPortal-utils-core/build.gradle
index c582270a1f7..8076e5b3b3c 100644
--- a/uPortal-utils/uPortal-utils-core/build.gradle
+++ b/uPortal-utils/uPortal-utils-core/build.gradle
@@ -17,8 +17,14 @@ dependencies {
     api "org.apache.commons:commons-lang3:${commonsLang3Version}"
     api "org.aspectj:aspectjrt:${aspectjVersion}"
     api "com.fasterxml.woodstox:woodstox-core:${woodstoxVersion}"
-    api "org.jasig.resourceserver:resource-server-api:${resourceServerVersion}"
-    api "org.jasig.resourceserver:resource-server-utils:${resourceServerVersion}"
+    api("org.jasig.resourceserver:resource-server-api:${resourceServerVersion}") {
+        exclude group: 'org.springframework', module: 'spring-jcl'
+        exclude group: 'org.slf4j'
+    }
+    api("org.jasig.resourceserver:resource-server-utils:${resourceServerVersion}") {
+        exclude group: 'org.springframework'
+        exclude group: 'org.slf4j'
+    }
     api("org.apereo.service.persondir:person-directory-impl:${personDirectoryVersion}") {
         exclude group: 'com.google.guava', module: 'guava'
         exclude group: 'org.springframework', module: 'spring-beans'
diff --git a/uPortal-webapp/build.gradle b/uPortal-webapp/build.gradle
index 7a4308b272c..557edfccebb 100644
--- a/uPortal-webapp/build.gradle
+++ b/uPortal-webapp/build.gradle
@@ -74,12 +74,15 @@ dependencies {
      */
     providedRuntime "org.hsqldb:hsqldb:${hsqldbVersion}"
 
-    webjars "org.webjars.npm:bootstrap:${bootstrapVersion}"
+    implementation "org.webjars:webjars-locator-core:0.59"
+    
+    webjars "org.jasig.resourceserver:resource-server-content:${resourceServerVersion}"
     webjars "org.webjars.npm:core-js-bundle:${coreJsBundleVersion}"
     webjars "org.webjars.npm:jstree:${jstreeVersion}"
     webjars "org.webjars.npm:regenerator-runtime:${regeneratorRuntimeVersion}"
     webjars "org.webjars.npm:webcomponents__webcomponentsjs:${webComponentPolyfillVersion}"
     webjars "org.webjars.npm:whatwg-fetch:${whatwgFetchPolyfillVersion}"
+    webjars "org.webjars:bootstrap:5.3.8"
 }
 
 node {
@@ -93,6 +96,10 @@ processResources {
     filter(ReplaceTokens, tokens:['projectVersion': project.version])
 }
 
+// Bootstrap path variables
+ext.bootstrapScssPath = "${buildDir}/generated-sources/skin/main/webapp/rs/bootstrap/5.3.8/scss"
+ext.bootstrapJsPath = "${buildDir}/generated-sources/skin/main/webapp/rs"
+
 task prepareSkinResources {
     // Unpack WebJars (part of the skin)
     configurations.webjars.allDependencies.each {
@@ -113,6 +120,15 @@ task prepareSkinResources {
                 into "${buildDir}/generated-sources/skin/main/webapp/webjars/${webjarName}"
             }
         }
+        // Stage 3: Copy rs directory from resource-server-content for SCSS compilation
+        if (webjarName == 'resource-server-content') {
+            doLast {
+                copy {
+                    from "${buildDir}/webjars/${webjarName}-${webjarVersion}/rs"
+                    into "${buildDir}/generated-sources/skin/main/webapp/rs"
+                }
+            }
+        }
     }
     // Add Respondr LESS sources
     doLast {
@@ -127,33 +143,50 @@ import org.jasig.resource.aggr.AggregationRequest
 import org.jasig.resource.aggr.ResourcesAggregator
 import org.jasig.resource.aggr.ResourcesAggregatorImpl
 task aggregateRespondrSkins {
+    inputs.files fileTree('src/main/webapp/media/skins/common')
     doLast {
         final ResourcesAggregator aggr = new ResourcesAggregatorImpl();
-        aggr.setDisplayJsWarnings(false);
+        aggr.setDisplayJsWarnings(true);
 
         final File resourcesXmlFile = new File(projectDir, 'src/main/webapp/media/skins/respondr/defaultSkin/skin.xml');
         final File fullOutputDirectory = new File(buildDir, 'generated-sources/skin/main/webapp/media/skins/respondr/defaultSkin');
         final File sharedJavaScriptDirectory = new File(buildDir, 'generated-sources/skin/main/webapp/media/skins/respondr');
 
-        // Provide the paths we evaluated in DEBUG logging
-        logger.debug("resourcesXmlFile=${resourcesXmlFile}");
-        logger.debug("fullOutputDirectory=${fullOutputDirectory}");
-        logger.debug("sharedJavaScriptDirectory=${sharedJavaScriptDirectory}");
+        // Debug logging
+        logger.lifecycle("=== AGGREGATION DEBUG ===");
+        logger.lifecycle("resourcesXmlFile=${resourcesXmlFile}");
+        logger.lifecycle("fullOutputDirectory=${fullOutputDirectory}");
+        logger.lifecycle("sharedJavaScriptDirectory=${sharedJavaScriptDirectory}");
+        logger.lifecycle("bootstrapJsPath=${bootstrapJsPath}");
+        
+        // Check Bootstrap file existence
+        def bootstrapFile = new File("${buildDir}/generated-sources/skin/main/webapp/webjars/bootstrap/js/bootstrap.bundle.min.js")
+        logger.lifecycle("Bootstrap webjar file exists: ${bootstrapFile.exists()}");
+        if (bootstrapFile.exists()) {
+            logger.lifecycle("Bootstrap file size: ${bootstrapFile.length()} bytes");
+        }
 
         final AggregationRequest aggregationRequest = new AggregationRequest();
         aggregationRequest
                 .setResourcesXml(resourcesXmlFile)
                 .setOutputBaseDirectory(fullOutputDirectory)
                 .addAdditionalSourceDirectory(fullOutputDirectory)
+                .addAdditionalSourceDirectory(new File(projectDir, 'src/main/webapp/media/skins/common'))
+                .addAdditionalSourceDirectory(new File(buildDir, 'generated-sources/skin/main/webapp'))
+                .addAdditionalSourceDirectory(new File(buildDir, 'generated-sources/skin/main/webapp'))
+                .addAdditionalSourceDirectory(new File(bootstrapJsPath))
                 .setSharedJavaScriptDirectory(sharedJavaScriptDirectory);
+        
+        logger.lifecycle("Starting aggregation...");
         aggr.aggregate(aggregationRequest);
+        logger.lifecycle("Aggregation complete.");
 
     }
 }
 
 // Generate CSS for Respondr skins
-project.tasks.getByName('npm_run_compile-less').dependsOn(prepareSkinResources)
-aggregateRespondrSkins.dependsOn('npm_run_compile-less')
+project.tasks.getByName('npm_run_compile-scss').dependsOn(prepareSkinResources)
+aggregateRespondrSkins.dependsOn('npm_run_compile-scss')
 processResources.dependsOn(aggregateRespondrSkins)
 
 war {
@@ -163,3 +196,12 @@ war {
         into '/'
     }
 }
+
+// Add WAR publishing
+publishing {
+    publications {
+        war(MavenPublication) {
+            from components.web
+        }
+    }
+}
diff --git a/uPortal-webapp/package.json b/uPortal-webapp/package.json
index 8c59fc288bd..6415644d259 100644
--- a/uPortal-webapp/package.json
+++ b/uPortal-webapp/package.json
@@ -2,9 +2,9 @@
   "name": "uportal-webapp",
   "private": true,
   "scripts": {
-    "compile-less": "lessc build/generated-sources/skin/main/webapp/media/skins/respondr/defaultSkin.less build/generated-sources/skin/main/webapp/media/skins/respondr/defaultSkin.css"
+    "compile-scss": "sass --load-path=build/generated-sources/skin/main/webapp/rs/bootstrap/5.3.8/scss build/generated-sources/skin/main/webapp/media/skins/respondr/defaultSkin.scss:build/generated-sources/skin/main/webapp/media/skins/respondr/defaultSkin.css"
   },
   "devDependencies": {
-    "less": "^4.2.0"
+    "sass": "^1.77.0"
   }
 }
diff --git a/uPortal-webapp/src/main/resources/layout/theme/respondr/content.xsl b/uPortal-webapp/src/main/resources/layout/theme/respondr/content.xsl
index 126bd8da042..f7a10d0ea24 100644
--- a/uPortal-webapp/src/main/resources/layout/theme/respondr/content.xsl
+++ b/uPortal-webapp/src/main/resources/layout/theme/respondr/content.xsl
@@ -74,7 +74,7 @@
   -->
   <xsl:template name="columns">
     <chunk-point/> <!-- Performance Optimization, see ChunkPointPlaceholderEventSource -->
-    <div id="portalPageBodyColumns" class="row">
+    <div id="portalPageBodyColumns" class="row" role="main" aria-multiselectable="false" aria-readonly="false" aria-disabled="false" tabindex="0">
 
       <!--
        | uPortal Classic vs. Flex
@@ -399,7 +399,7 @@
    | These two templates render the focused portlet content.
   -->
   <xsl:template match="focused">
-    <div class="fluid-row">
+    <div class="row">
         <div class="col-md-12">
             <div id="portalPageBodyColumns">
                 <div class="portal-page-column column-1">
@@ -428,7 +428,7 @@
       <div class="portlet-controls">
         <!-- Locked indicator for portlets that are not movable -->
         <xsl:if test="$PORTLET_LOCKED='locked'">
-          <div class="locked-icon">
+          <div class="locked-icon" title="{upMsg:getMessage('this.portlet.locked', $USER_LANG)}">
               <i class="fa fa-lock" aria-hidden="true"></i>
               <span class="sr-only">
                   <xsl:value-of select="upMsg:getMessage('this.portlet.locked', $USER_LANG)"/>
@@ -446,10 +446,10 @@
         <div class="portlet-options-menu btn-group hidden">  <!-- Start out hidden.  jQuery will unhide if there are menu options -->
           <xsl:choose>
             <xsl:when test="$STYLE = 'hamburger'">
-              <a class="btn btn-link dropdown-toggle" data-toggle="dropdown" title="{upMsg:getMessage('portlet.menu.option', $USER_LANG)}" href="javascript:void(0);"><i class="fa fa-bars"></i></a>
+              <a class="btn btn-link dropdown-toggle" data-bs-toggle="dropdown" title="{upMsg:getMessage('portlet.menu.option', $USER_LANG)}" href="javascript:void(0);"><i class="fa fa-bars"></i></a>
             </xsl:when>
             <xsl:otherwise>
-              <a class="btn btn-link dropdown-toggle" data-toggle="dropdown" title="{upMsg:getMessage('portlet.menu.option', $USER_LANG)}" href="javascript:void(0);"><xsl:value-of select="upMsg:getMessage('portlet.menu.option', $USER_LANG)"/> <span class="{upMsg:getMessage('portlet.menu.option.caretclass', $USER_LANG)}"></span></a>
+              <a class="btn btn-link dropdown-toggle" data-bs-toggle="dropdown" title="{upMsg:getMessage('portlet.menu.option', $USER_LANG)}" href="javascript:void(0);"><xsl:value-of select="upMsg:getMessage('portlet.menu.option', $USER_LANG)"/> <span class="{upMsg:getMessage('portlet.menu.option.caretclass', $USER_LANG)}"></span></a>
             </xsl:otherwise>
           </xsl:choose>
           <ul class="dropdown-menu" style="right: 0; left: auto;">
@@ -481,7 +481,7 @@
 
           <xsl:if test="$AUTHENTICATED='true'">
             <li class="up-portlet-options-item rate">
-              <a href="#" title="{upMsg:getMessage('rate.this.portlet', $USER_LANG)}" class="rateThisPortlet{@ID}" data-toggle="modal" data-target="#ratePortletModal{@ID}">
+              <a href="#" title="{upMsg:getMessage('rate.this.portlet', $USER_LANG)}" class="rateThisPortlet{@ID}" data-bs-toggle="modal" data-bs-target="#ratePortletModal{@ID}">
                 <span><xsl:value-of select="upMsg:getMessage('rate.this.portlet', $USER_LANG)"/></span>
               </a>
             </li>
@@ -501,7 +501,7 @@
                               (function($) {
                               $( document ).ready(function() {
                               $('.addToFavoriteLink<xsl:value-of
-                              select="@chanID"/>').click({
+                              select="@chanID"/>').on('click', {
                               portletId : '<xsl:value-of select="@chanID"/>',
                               context : '<xsl:value-of select="$CONTEXT_PATH"/>'}, up.addToFavorite);
                               });
@@ -520,7 +520,7 @@
                           <script type="text/javascript">
                               (function($) {
                               $( document ).ready(function() {
-                              $('.removeFromFavoriteLink<xsl:value-of select="@chanID"/>').click({portletId : '<xsl:value-of select="@chanID"/>', context : '<xsl:value-of select="$CONTEXT_PATH"/>'}, up.removeFromFavorite);
+                              $('.removeFromFavoriteLink<xsl:value-of select="@chanID"/>').on('click', {portletId : '<xsl:value-of select="@chanID"/>', context : '<xsl:value-of select="$CONTEXT_PATH"/>'}, up.removeFromFavorite);
                               });
                               })(up.jQuery);
                           </script>
@@ -693,7 +693,7 @@
           <xsl:value-of select="$PORTAL_PROTOCOL_AND_SERVER"/><xsl:value-of select="$CONTEXT_PATH"/>/p/<xsl:value-of select="@fname"/>
       </xsl:variable>
       <li class="up-portlet-options-item directUrl">
-          <a title="{upMsg:getMessage('direct.url', $USER_LANG)}" class="up-portlet-control directUrl"  data-toggle="modal" data-target="#direct-url-modal" data-direct-url="{$portletDirectUrl}"><xsl:value-of select="upMsg:getMessage('direct.url', $USER_LANG)"/></a>
+          <a title="{upMsg:getMessage('direct.url', $USER_LANG)}" class="up-portlet-control directUrl"  data-bs-toggle="modal" data-bs-target="#direct-url-modal" data-direct-url="{$portletDirectUrl}"><xsl:value-of select="upMsg:getMessage('direct.url', $USER_LANG)"/></a>
       </li>
 
           <!-- About Icon -->
@@ -749,9 +749,9 @@
                     <xsl:variable select="//tab[@focusedFragment='true']/@ID" name="FOCUSED_FRAGMENT_ID"></xsl:variable>
                     <!--
                     Collection favoriting and link access not yet implemented.
-                    <div class="dropdown pull-right">
+                    <div class="dropdown float-end">
                     <button class="btn dropdown-toggle" type="button" id='{$FOCUSED_FRAGMENT_ID}dropdownMenu'
-                            data-toggle="dropdown" style="background: inherit;">
+                            data-bs-toggle="dropdown" style="background: inherit;">
                         <span class="glyphicon glyphicon-cog"></span>
                     </button>
                         <ul class="dropdown-menu" role="menu" aria-labelledby='{$FOCUSED_FRAGMENT_ID}dropdownMenu'>
diff --git a/uPortal-webapp/src/main/resources/layout/theme/respondr/navigation.xsl b/uPortal-webapp/src/main/resources/layout/theme/respondr/navigation.xsl
index 26351833aa5..65df52e97d7 100644
--- a/uPortal-webapp/src/main/resources/layout/theme/respondr/navigation.xsl
+++ b/uPortal-webapp/src/main/resources/layout/theme/respondr/navigation.xsl
@@ -281,7 +281,7 @@
         <span title="{$NAV_INLINE_EDIT_TITLE}" class="portal-navigation-label {$NAV_INLINE_EDIT_TEXT}">
           <xsl:value-of select="upElemTitle:getTitle(@ID, $USER_LANG, @name)"/>
         </span>
-        <i class="fa fa-chevron-right visible-xs"></i>
+        <i class="fa fa-chevron-right d-sm-none"></i>
       </a> <!-- Navigation item link. -->
       <xsl:if test="$AUTHENTICATED='true' and not($PORTAL_VIEW='focused')">
         <xsl:if test="not(@dlm:moveAllowed='false') or $IS_FRAGMENT_ADMIN_MODE='true'">
@@ -326,7 +326,7 @@
       <xsl:attribute name="id">portalSubnavigationToggle_<xsl:value-of select="@ID"/></xsl:attribute>
       <xsl:attribute name="href">javascript:void(0);</xsl:attribute>
       <xsl:attribute name="class">dropdown-toggle portal-navigation-dropdown</xsl:attribute>
-      <xsl:attribute name="data-toggle">dropdown</xsl:attribute>
+      <xsl:attribute name="data-bs-toggle">dropdown</xsl:attribute>
       <xsl:attribute name="role">button</xsl:attribute>
       <xsl:attribute name="aria-expanded">false</xsl:attribute>
       <xsl:attribute name="aria-haspopup">true</xsl:attribute>
@@ -335,7 +335,7 @@
       <xsl:element name="span"> <!-- Navigation dropdown toogle caret -->
        <xsl:attribute name="class">caret</xsl:attribute>
       </xsl:element>
-      <span class="sr-only">
+      <span class="visually-hidden">
        <xsl:value-of select="upMsg:getMessage('toggle.menu', $USER_LANG)"/>
       </span>
     </xsl:element>
diff --git a/uPortal-webapp/src/main/resources/layout/theme/respondr/regions.xsl b/uPortal-webapp/src/main/resources/layout/theme/respondr/regions.xsl
index 8ba57c0426e..d6cba2ceb1f 100644
--- a/uPortal-webapp/src/main/resources/layout/theme/respondr/regions.xsl
+++ b/uPortal-webapp/src/main/resources/layout/theme/respondr/regions.xsl
@@ -143,14 +143,14 @@
     <xsl:template name="region.header-left">
         <xsl:choose>
             <xsl:when test="//region[@name='header-left']/channel">
-                <div id="region-header-left" class="col-sm-6 col-md-8 text-left">
+                <div id="region-header-left" class="col-sm-6 col-md-8 text-start">
                     <xsl:for-each select="//region[@name='header-left']/channel">
                         <xsl:call-template name="regions.portlet.decorator" />
                     </xsl:for-each>
                 </div>
             </xsl:when>
             <xsl:otherwise>
-                <div id="empty-region-header-left" class="col-sm-6 col-md-8 text-left"></div>
+                <div id="empty-region-header-left" class="col-sm-6 col-md-8 text-start"></div>
             </xsl:otherwise>
         </xsl:choose>
     </xsl:template>
@@ -164,14 +164,14 @@
     <xsl:template name="region.header-right">
         <xsl:choose>
             <xsl:when test="//region[@name='header-right']/channel">
-                <div id="region-header-right" class="col-sm-6 col-md-4 text-right">
+                <div id="region-header-right" class="col-sm-6 col-md-4 text-end">
                     <xsl:for-each select="//region[@name='header-right']/channel">
                         <xsl:call-template name="regions.portlet.decorator" />
                     </xsl:for-each>
                 </div>
             </xsl:when>
             <xsl:otherwise>
-                <div id="empty-region-header-right" class="col-sm-6 col-md-4 text-right"></div>
+                <div id="empty-region-header-right" class="col-sm-6 col-md-4 text-end"></div>
             </xsl:otherwise>
         </xsl:choose>
     </xsl:template>
@@ -203,14 +203,14 @@
     <xsl:template name="region.customize">
         <xsl:if test="upAuth:hasPermission('UP_SYSTEM', 'CUSTOMIZE', 'ALL')">
             <xsl:if test="//region[@name='customize']/channel">
-                <div id="region-customize" class="container-fluid hidden-xs">
+                <div id="region-customize" class="container-fluid d-none d-sm-block">
                     <div id="customizeOptionsWrapper">
                         <div id="customizeOptions" class="collapse">
                                 <xsl:for-each select="//region[@name='customize']/channel">
                                     <xsl:call-template name="regions.portlet.decorator" />
                                 </xsl:for-each>
                         </div>
-                        <button type="button" class="btn btn-default" data-toggle="collapse" data-target="#customizeOptions"><xsl:value-of select="upMsg:getMessage('customize', $USER_LANG)"/> <i class="fa"></i></button>
+                        <button type="button" class="btn btn-secondary" id="customizeButton"><xsl:value-of select="upMsg:getMessage('customize', $USER_LANG)"/> <i class="fa fa-caret-down"></i></button>
                     </div>
                 </div>
             </xsl:if>
@@ -383,7 +383,7 @@
             <div class="modal-dialog">
                 <div class="modal-content">
                     <div class="modal-header">
-                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">&times;</button>
                         <h4 class="modal-title">Configuration</h4>
                     </div>
                     <div class="modal-body">
@@ -397,14 +397,14 @@
             <div class="modal-dialog">
                 <div class="modal-content">
                     <div class="modal-header">
-                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only"><xsl:value-of select="upMsg:getMessage('close', $USER_LANG)"/></span></button>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal"><xsl:attribute name="aria-label"><xsl:value-of select="upMsg:getMessage('close', $USER_LANG)"/></xsl:attribute>&times;</button>
                         <h4 class="modal-title"><xsl:value-of select="upMsg:getMessage('direct.url', $USER_LANG)"/></h4>
                     </div>
                     <div class="modal-body">
                         <p id="direct-url-display" tabindex="0"></p>
                     </div>
                     <div class="modal-footer">
-                        <button type="button" class="btn btn-default" data-dismiss="modal"><xsl:value-of select="upMsg:getMessage('close', $USER_LANG)"/></button>
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal"><xsl:value-of select="upMsg:getMessage('close', $USER_LANG)"/></button>
                     </div>
                 </div>
             </div>
@@ -499,10 +499,9 @@
             <script type="text/javascript">
                 up.jQuery(document).ready(function() {
                     var $ = up.jQuery;
-                    $('section.<xsl:value-of select="@fname" />').hover(function() {
+                    $('section.<xsl:value-of select="@fname" />').on('mouseenter', function() {
                         $(this).find('.hover-chrome').stop(true, true).slideDown('medium');
-                    },
-                    function() {
+                    }).on('mouseleave', function() {
                         $(this).find('.hover-chrome').stop(true,true).slideUp('medium');
                     });
                 });
diff --git a/uPortal-webapp/src/main/resources/layout/theme/respondr/respondr.xsl b/uPortal-webapp/src/main/resources/layout/theme/respondr/respondr.xsl
index a64615a6264..0f29670289f 100644
--- a/uPortal-webapp/src/main/resources/layout/theme/respondr/respondr.xsl
+++ b/uPortal-webapp/src/main/resources/layout/theme/respondr/respondr.xsl
@@ -269,9 +269,7 @@
   <script type="text/javascript">
     var up = up || {};
     up.jQuery = jQuery.noConflict(true);
-    up.fluid = fluid;
-    fluid = null;
-    fluid_1_5 = null;
+
     up._ = _.noConflict();
     up._.templateSettings = {
       interpolate : /{{=(.+?)}}/g,
@@ -291,7 +289,8 @@
         var navMenuToggle = function() {
           var menu = $(".portal-nav .menu"), menuToggle = $("#up-sticky-nav .menu-toggle");
           // Toggle the nav visibility when the button is clicked.
-          menuToggle.click(function() {
+          menuToggle.on('click', function(e) {
+            e.preventDefault();
             // Open and animate the offcanvas
             $('.row-offcanvas').toggleClass('active');
             // show the nav
@@ -322,7 +321,8 @@
           $('div.hover-toolbar').filter('.hidden').has('li').removeClass('hidden');
 
           // Attach behavior to the Move Portlet options menu
-          $('.portlet-options-menu .up-portlet-control.move').click(function() {
+          $('.portlet-options-menu .up-portlet-control.move').on('click', function(e) {
+             e.preventDefault();
              // If Move Portlet, unhide the grab handle and change the menu text
              if ($(this).text() === $(this).attr('data-move-text')) {
                 $(this).parents('.up-portlet-titlebar').find('.grab-handle').removeClass('hidden');
@@ -380,7 +380,7 @@
 <xsl:template name="page.dialogs.dashboard">
 
     <xsl:if test="$IS_FRAGMENT_ADMIN_MODE='true'">
-        <div class="edit-page-permissions-dialog" title="{upMsg:getMessage('edit.page.permissions', $USER_LANG)}">
+        <div class="edit-page-permissions-dialog" title="{upMsg:getMessage('edit.page.permissions', $USER_LANG)}" style="display:none;">
             <div class="fl-widget portlet">
                 <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead">
                     <h2 class="title" role="heading"><xsl:value-of select="/layout/navigation/tab[@activeTab='true']/@name"/></h2>
@@ -408,7 +408,7 @@
                 </div>
             </div>
         </div>
-        <div class="edit-column-permissions-dialog" title="{upMsg:getMessage('edit.column.permissions', $USER_LANG)}">
+        <div class="edit-column-permissions-dialog" title="{upMsg:getMessage('edit.column.permissions', $USER_LANG)}" style="display:none;">
             <div class="fl-widget portlet">
                 <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead">
                     <h2 class="title" role="heading"></h2>
@@ -430,7 +430,7 @@
                 </div>
             </div>
         </div>
-        <div class="edit-portlet-permissions-dialog" title="{upMsg:getMessage('edit.portlet.permissions', $USER_LANG)}">
+        <div class="edit-portlet-permissions-dialog" title="{upMsg:getMessage('edit.portlet.permissions', $USER_LANG)}" style="display:none;">
             <div class="fl-widget portlet">
                 <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead">
                     <h2 class="title" role="heading"></h2>
@@ -471,12 +471,17 @@
             }
 
             <xsl:if test="$IS_FRAGMENT_ADMIN_MODE='true'">
-            up.FragmentPermissionsManager("body", {
-                savePermissionsUrl: '<xsl:value-of select="$CONTEXT_PATH"/>/api/layout',
-                messages: {
-                    columnX: '<xsl:value-of select="upMsg:getMessageForEmacsScript('column.x', $USER_LANG)"/>',
-                }
-            });
+            try {
+                up.FragmentPermissionsManager("body", {
+                    savePermissionsUrl: '<xsl:value-of select="$CONTEXT_PATH"/>/api/layout',
+                    messages: {
+                        columnX: '<xsl:value-of select="upMsg:getMessageForEmacsScript('column.x', $USER_LANG)"/>',
+                    }
+                });
+                console.log('FragmentPermissionsManager initialized successfully');
+            } catch (e) {
+                console.error('FragmentPermissionsManager initialization failed:', e);
+            }
             </xsl:if>
             <xsl:if test="$AUTHENTICATED='true'">
             var options = {
@@ -547,11 +552,9 @@
                 }
             };
             var layoutPreferences = up.LayoutPreferences("body", options);
-            // For the portlet/Respondr version of the gallery control,
-            // we must open it ourselves (if present) when the page loads.
-            if (layoutPreferences.components.gallery) {
-                layoutPreferences.components.gallery.openGallery();
-            }
+            // Store global reference for debugging and external access
+            window.up.layoutPreferences = layoutPreferences;
+            // Gallery will only open when user clicks the customize button
             </xsl:if>
         });
     </script>
@@ -582,7 +585,7 @@
                       <xsl:when test="$unlockedTab">
                         <xsl:for-each select="/layout/navigation/tab[@dlm:hasColumnAddChildAllowed='true']">
                             <input name="targetTab" id="targetTab{@ID}" value="{@ID}" type="radio" />
-                            <label for="targetTab{@ID}" class="portlet-form-field-label">
+                            <label for="targetTab{@ID}" class="portlet-form-field-label form-label">
                                 <xsl:value-of select="@name" />
                             </label>
                             <br />
@@ -663,7 +666,7 @@
                 <header class="portal-header" role="banner">
                     <div id="up-sticky-nav" class="container-fluid">
                         <div class="portal-global row">
-                            <a href="javascript:void(0);" tabindex="0" class="menu-toggle pull-left" aria-label="{upMsg:getMessage('menu', $USER_LANG)}" role="button" title="{upMsg:getMessage('menu', $USER_LANG)}" data-toggle="offcanvas" aria-expanded="false" aria-haspopup="true" aria-controls="sidebar">
+                            <a href="javascript:void(0);" tabindex="0" class="menu-toggle float-start" aria-label="{upMsg:getMessage('menu', $USER_LANG)}" role="button" title="{upMsg:getMessage('menu', $USER_LANG)}" data-bs-toggle="offcanvas" aria-expanded="false" aria-haspopup="true" aria-controls="sidebar">
                                 <div class="hamburger hamburger-arrow">
                                    <div class="hamburger-box">
                                      <div class="hamburger-inner"></div>
@@ -711,16 +714,13 @@
                                 <xsl:call-template name="focused-fragment-header" />
                                 <xsl:call-template name="region.pre-content" />
                                 <!-- For editing page permissions in fragment-admin mode  -->
-                                <xsl:if test="$IS_FRAGMENT_ADMIN_MODE='true'">
-                                    <div class="row">
-                                        <div class="col-md-9"></div>
-                                        <div class="col-md-3">
-                                            <div id="portalEditPagePermissions" class="fl-fix">
-                                                <a class="button" id="editPagePermissionsLink" href="#" title="{upMsg:getMessage('edit.page.permissions', $USER_LANG)}">
-                                                    <i class="fa fa-align-justify"></i>
-                                                    <xsl:value-of select="upMsg:getMessage('edit.page.permissions', $USER_LANG)"/>
-                                                </a>
-                                            </div>
+                                <xsl:if test="$IS_FRAGMENT_ADMIN_MODE='true' and $PORTAL_VIEW!='focused'">
+                                    <div class="d-flex justify-content-end mb-3" style="position: relative; left: 0; right: auto; margin-left: 0; float: none;">
+                                        <div id="portalEditPagePermissions" class="fl-fix">
+                                            <a class="button" id="editPagePermissionsLink" href="#" title="{upMsg:getMessage('edit.page.permissions', $USER_LANG)}">
+                                                <i class="fa fa-align-justify"></i>
+                                                <xsl:value-of select="upMsg:getMessage('edit.page.permissions', $USER_LANG)"/>
+                                            </a>
                                         </div>
                                     </div>
                                 </xsl:if>
@@ -811,7 +811,7 @@
                             <div class="container-fluid">
                                 <div class="portal-user">
                                     <div class="navbar-header">
-                                        <a href="javascript:window.location = document.referrer || '{$CONTEXT_PATH}';" title="{upMsg:getMessage('return.to.dashboard.view', $USER_LANG)}" class="up-portlet-control hide-content pull-left fa fa-home portal-return-to-dashboard"></a>
+                                        <a href="javascript:window.location = document.referrer || '{$CONTEXT_PATH}';" title="{upMsg:getMessage('return.to.dashboard.view', $USER_LANG)}" class="up-portlet-control hide-content float-start fa fa-home portal-return-to-dashboard"></a>
                                     </div>
                                     <div class="navbar-collapse collapse">
                                         <xsl:choose>
diff --git a/uPortal-webapp/src/main/resources/properties/portal.properties b/uPortal-webapp/src/main/resources/properties/portal.properties
index 9eb433b11bb..80fd11d3b9a 100644
--- a/uPortal-webapp/src/main/resources/properties/portal.properties
+++ b/uPortal-webapp/src/main/resources/properties/portal.properties
@@ -483,7 +483,7 @@ org.apereo.portal.layout.useTabGroups=false
 ## that will show all channels that the tab contains. And a click on a channel title will
 ## render it on a maximized window state.
 ##
-org.apereo.portal.layout.useFlyoutMenus=false
+org.apereo.portal.layout.useFlyoutMenus=true
 
 ##
 ## Set the serverName to use to identify this server within a cluster, if not set but
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/attribute-swapper/attributesForm.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/attribute-swapper/attributesForm.jsp
index 574b1d10e82..c39f6c0ef44 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/attribute-swapper/attributesForm.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/attribute-swapper/attributesForm.jsp
@@ -29,10 +29,10 @@
 </portlet:actionURL>
 
 <!-- Portlet -->
-<div class="fl-widget portlet atr-swp view-attributesform" role="section">
+<div class="card portlet atr-swp view-attributesform" role="section">
 
 	<!-- Portlet Titlebar -->
-    <div class="fl-widget-titlebar titlebar portlet-titlebar">
+    <div class="card-header titlebar portlet-titlebar">
     	<h2 class="title"><spring:message code="attributes"/></h2>
         <div class="toolbar" role="toolbar">
             <ul>
@@ -44,7 +44,7 @@
     </div>
 
     <!-- Portlet Content -->
-	<div class="fl-widget-content content portlet-content">
+	<div class="card-body content portlet-content">
 
         <form:form modelAttribute="attributeSwapRequest" action="${attributeSwapUrl}" method="POST">
             <table class="portlet-table table table-hover">
@@ -80,7 +80,7 @@
                                     </c:if>
                                 </td>
                                 <td>
-                                    <label for="attributesToCopy['${fn:escapeXml(swappableAttribute)}'].value1">${fn:escapeXml(targetUserDetails.attributes[swappableAttribute][0])}</label>
+                                    <label for="attributesToCopy['${fn:escapeXml(swappableAttribute)}'].value1" class="form-label">${fn:escapeXml(targetUserDetails.attributes[swappableAttribute][0])}</label>
                                 </td>
                             </c:if>
                         </tr>
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/cache-manager/cache-list.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/cache-manager/cache-list.jsp
index 53dd9a60824..488054ee9c2 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/cache-manager/cache-list.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/cache-manager/cache-list.jsp
@@ -26,10 +26,10 @@
 </portlet:renderURL>
 
 <!-- Portlet -->
-<div class="fl-widget portlet cache-mgr view-list" role="section">
+<div class="card portlet cache-mgr view-list" role="section">
 
   <!-- Portlet Titlebar -->
-    <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead">
+    <div class="card-header titlebar portlet-titlebar" role="sectionhead">
         <h2 class="title" role="heading"><spring:message code="uportal.cache.manager"/></h2>
         <div class="toolbar" role="toolbar">
             <a class="button btn btn-primary" href="${flushAllUrl}"><span><spring:message code="empty.all.caches" />&nbsp;&nbsp;<i class="fa fa-refresh"></i></span></a>
@@ -37,7 +37,7 @@
     </div> <!-- end: portlet-titlebar -->
 
   <!-- Portlet Content -->
-  <div class="fl-widget-content content portlet-content">
+  <div class="card-body content portlet-content">
     <!-- Portlet Section -->
     <div class="portlet-section" role="region">
     	<div class="titlebar">
@@ -49,7 +49,7 @@
       <div class="content">
         <p class="note" role="note"><spring:message code="select.cache.to.view.stats.and.clear.content"/></p>
 
-        <table class="portlet-table table-hover cache-table table table-condensed table-striped">
+        <table class="portlet-table table-hover cache-table table table-sm table-striped">
             <thead>
                 <tr>
                     <th><spring:message code="name"/></th>
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/cache-manager/cache-statistics.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/cache-manager/cache-statistics.jsp
index 866e1fcf8bb..db666c25f00 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/cache-manager/cache-statistics.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/cache-manager/cache-statistics.jsp
@@ -29,15 +29,15 @@
 </portlet:renderURL>
 
 <!-- Portlet -->
-<div class="fl-widget portlet cache-mgr view-statistics" role="section">
+<div class="card portlet cache-mgr view-statistics" role="section">
   <!-- Portlet Titlebar -->
-  <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead">
+  <div class="card-header titlebar portlet-titlebar" role="sectionhead">
     <h2 class="title" role="heading"><spring:message code="cache.statistics"/></h2>
     <h3 class="subtitle">${fn:escapeXml(cacheName)}</h3>
   </div> <!-- end: portlet-titlebar -->
 
   <!-- Portlet Content -->
-  <div class="fl-widget-content content portlet-content">
+  <div class="card-body content portlet-content">
 
         <table class="portlet-table table table-hover">
             <thead>
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/cache-manager/confirm-flush-all.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/cache-manager/confirm-flush-all.jsp
index 0d6932bb39e..19a115cebaa 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/cache-manager/confirm-flush-all.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/cache-manager/confirm-flush-all.jsp
@@ -24,13 +24,13 @@
 </portlet:actionURL>
         
 <!-- Portlet -->
-<div class="fl-widget portlet cache-mgr view-flushall" role="section">
+<div class="card portlet cache-mgr view-flushall" role="section">
 	<!-- Portlet Titlebar -->
-	<div class="fl-widget-titlebar titlebar portlet-titlebar">
+	<div class="card-header titlebar portlet-titlebar">
     	<h2 class="title"><spring:message code="flush.cache"/></h2>
     </div>
     <!-- Portlet Body -->
-    <div class="fl-widget-content content portlet-content">
+    <div class="card-body content portlet-content">
         
         <!-- Messages -->
         <div class="portlet-msg-alert portlet-msg alert" role="alert">
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/cache-manager/confirm-flush.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/cache-manager/confirm-flush.jsp
index 32ebeef9e20..20749f14f95 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/cache-manager/confirm-flush.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/cache-manager/confirm-flush.jsp
@@ -24,13 +24,13 @@
 </portlet:actionURL>
         
 <!-- Portlet -->
-<div class="fl-widget portlet cache-mgr view-flush" role="section">
+<div class="card portlet cache-mgr view-flush" role="section">
 	<!-- Portlet Titlebar -->
-	<div class="fl-widget-titlebar titlebar portlet-titlebar">
+	<div class="card-header titlebar portlet-titlebar">
     	<h2 class="title"><spring:message code="flush.cache"/></h2>
     </div>
     <!-- Portlet Content -->
-    <div class="fl-widget-content content portlet-content">
+    <div class="card-body content portlet-content">
     	
         <!-- Messages -->
         <div class="portlet-msg-alert portlet-msg alert" role="alert">
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/edit-account/editLocalAccount.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/edit-account/editLocalAccount.jsp
index 5e0d8825b30..1779d556af3 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/edit-account/editLocalAccount.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/edit-account/editLocalAccount.jsp
@@ -26,10 +26,10 @@
 <c:set var="n"><portlet:namespace/></c:set>
 
 <!-- Portlet -->
-<div class="fl-widget portlet user-mgr view-reviewuser" role="section">
+<div class="card portlet user-mgr view-reviewuser" role="section">
 
     <!-- Portlet Titlebar -->
-    <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead">
+    <div class="card-header titlebar portlet-titlebar" role="sectionhead">
         <h2 class="title" role="heading">
             <c:choose>
                 <c:when test="${ accountForm.id < 0 }">
@@ -48,7 +48,7 @@
     </div> <!-- end: portlet-titlebar -->
 
     <!-- Portlet Body -->
-    <div class="fl-widget-content content portlet-content">
+    <div class="card-body content portlet-content">
 
         <form:form modelAttribute="accountForm" action="${formUrl}" method="POST">
 
@@ -67,7 +67,7 @@
                             <c:if test="${ accountForm.id < 0 }">
                                 <tr>
                                     <td class="attribute-name">
-                                        <label for="${n}userUsername">
+                                        <label for="${n}userUsername" class="form-label">
                                             <spring:message code="username" />
                                         </label>
                                     </td>
@@ -79,7 +79,7 @@
                             <!--  Password and confirm password -->
                             <tr>
                                 <td class="attribute-name">
-                                    <label for="${n}userPassword">
+                                    <label for="${n}userPassword" class="form-label">
                                         <spring:message code="password"/>
                                     </label>
                                 </td>
@@ -89,7 +89,7 @@
                             </tr>
                             <tr>
                                 <td class="attribute-name">
-                                    <label for="${n}userConfirmPassword">
+                                    <label for="${n}userConfirmPassword" class="form-label">
                                         <spring:message code="confirm.password"/>
                                     </label>
                                 </td>
@@ -118,7 +118,7 @@
                                 <tr>
                                     <td class="attribute-name">
                                         <strong>
-                                            <label for="${ n }${ attribute.name }">
+                                            <label for="${ n }${ attribute.name }" class="form-label">
                                                 <spring:message code="${ attribute.label }"/>
                                             </label>
                                         </strong>
@@ -159,7 +159,7 @@
                                     <td class="attribute-name">
                                         <c:set var="attrName" value="${ attribute.key }"/>
                                         <strong>
-                                            <label for="${ n }${ attrName }">
+                                            <label for="${ n }${ attrName }" class="form-label">
                                                 <spring:message code="attribute.displayName.${attrName}" text="${attrName}"/>
                                             </label>
                                         </strong>
@@ -242,13 +242,13 @@
 <script type="text/javascript">
     up.jQuery(function() {
         var $ = up.jQuery;
-        $(document).ready(function(){
-            up.ParameterEditor(
-                    $("#${n}standardAttributes"),
+        $(function(){
+            new ModernParameterEditor(
+                    $("#${n}standardAttributes")[0],
                     {
                         parameterBindName: 'attributes',
                         multivalued: true,
-                        dialog: $("#${n}parameterForm"),
+                        dialog: $("#${n}parameterForm")[0],
                         displayClasses: {
                             deleteItemLink: "delete-attribute-link",
                             deleteValueLink: "delete-attribute-value-link",
@@ -261,12 +261,12 @@
                         }
                     }
                 );
-            up.ParameterEditor(
-                    $("#${n}customAttributes"),
+            new ModernParameterEditor(
+                    $("#${n}customAttributes")[0],
                     {
                         parameterBindName: 'attributes',
                         multivalued: true,
-                        dialog: $("#${n}parameterForm"),
+                        dialog: $("#${n}parameterForm")[0],
                         displayClasses: {
                             deleteItemLink: "delete-attribute-link",
                             deleteValueLink: "delete-attribute-value-link",
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/edit-group/confirmRemove.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/edit-group/confirmRemove.jsp
index 9ee44523c0f..3694b30e42d 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/edit-group/confirmRemove.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/edit-group/confirmRemove.jsp
@@ -25,15 +25,15 @@
 <c:set var="n"><portlet:namespace/></c:set>
 
 <!-- Portlet -->
-<div class="fl-widget portlet grp-mgr view-confirmremove" role="section">
+<div class="card portlet grp-mgr view-confirmremove" role="section">
 
     <!-- Portlet Title -->
-    <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead">
+    <div class="card-header titlebar portlet-titlebar" role="sectionhead">
         <h2 class="title" role="heading"><spring:message code="delete.group"/></h2>
     </div> <!-- end: portlet-title -->
 
     <!-- Portlet Body -->
-    <div class="fl-widget-content content portlet-content">
+    <div class="card-body content portlet-content">
 
     <form action="${formUrl}" method="POST">
 
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/edit-group/editDetails.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/edit-group/editDetails.jsp
index 76e41f83093..63b29379f6c 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/edit-group/editDetails.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/edit-group/editDetails.jsp
@@ -25,15 +25,15 @@
 <c:set var="n"><portlet:namespace/></c:set>
 
 <!-- Portlet -->
-<div class="fl-widget portlet grp-mgr view-editdetails" role="section">
+<div class="card portlet grp-mgr view-editdetails" role="section">
 
     <!-- Portlet Title -->
-    <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead">
+    <div class="card-header titlebar portlet-titlebar" role="sectionhead">
         <h2 class="title" role="heading"><spring:message code="edit.group.details"/></h2>
     </div> <!-- end: portlet-title -->
 
     <!-- Portlet Body -->
-    <div class="fl-widget-content content portlet-content">
+    <div class="card-body content portlet-content">
         <form:form action="${ formUrl }" method="POST" modelAttribute="group">
 
             <!-- Portlet Messages -->
@@ -54,11 +54,11 @@
                     </thead>
                     <tbody>
                         <tr>
-                            <td class="label"><label for="name"><spring:message code="name"/>:</label></td>
+                            <td class="label"><label for="name" class="form-label"><spring:message code="name"/>:</label></td>
                             <td><form:input path="name"/></td>
                         </tr>
                         <tr>
-                            <td class="label"><label for="description"><spring:message code="description"/>:</label></td>
+                            <td class="label"><label for="description" class="form-label"><spring:message code="description"/>:</label></td>
                             <td><form:input path="description"/></td>
                         </tr>
                     </tbody>
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/edit-group/reviewGroup.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/edit-group/reviewGroup.jsp
index 0bd1d0452b9..a57dea08f5f 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/edit-group/reviewGroup.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/edit-group/reviewGroup.jsp
@@ -55,10 +55,10 @@
 <c:set var="isNew" value="${ empty group.key }"/>
 
 <!-- Portlet -->
-<div class="fl-widget portlet grp-mgr view-reviewgroup" role="section">
+<div class="card portlet grp-mgr view-reviewgroup" role="section">
 
     <!-- Portlet Titlebar -->
-    <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead">
+    <div class="card-header titlebar portlet-titlebar" role="sectionhead">
         <h2 class="title" role="heading">${ fn:escapeXml(group.name )}</h2>
         <h3 class="subtitle">${ fn:escapeXml(group.description )}</h3>
         <div class="details">Created by ${ fn:escapeXml(group.creatorId )}</div>
@@ -81,7 +81,7 @@
     </div> <!-- end: portlet-titlebar -->
     
     <!-- Portlet Body -->
-    <div class="fl-widget-content content portlet-content">
+    <div class="card-body content portlet-content">
         
         <!-- Portlet Section -->
         <div class="portlet-section" role="region">
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/edit-group/viewGroupPermissions.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/edit-group/viewGroupPermissions.jsp
index f0e07993af2..a13c46e325b 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/edit-group/viewGroupPermissions.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/edit-group/viewGroupPermissions.jsp
@@ -97,16 +97,16 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
 | the user interface of this portlet
 | including HTML, CSS, JavaScript, accessibilty,
 | naming conventions, 3rd Party libraries
-| (like jQuery and the Fluid Skinning System)
+| (like jQuery and Bootstrap)
 | and more, refer to:
 | docs/SKINNING_UPORTAL.md
 -->
 
 <!-- Portlet -->
-<div class="fl-widget portlet prm-mgr" role="section">
+<div class="card portlet prm-mgr" role="section">
 
     <!-- Portlet Titlebar -->
-    <div class="fl-widget-titlebar portlet-titlebar" role="sectionhead">
+    <div class="card-header portlet-titlebar" role="sectionhead">
         <h2 class="title" role="heading">
             <a href="${ groupUrl }">${ fn:escapeXml(group.name )}</a> >
             <spring:message code="permissions"/>
@@ -114,7 +114,7 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
     </div> <!-- end: portlet-titlebar -->
 
     <!-- Portlet Content -->
-    <div id="${n}permissionBrowser" class="fl-widget-content portlet-content">
+    <div id="${n}permissionBrowser" class="card-body portlet-content">
 
         <!-- Portlet Section -->
         <div id="${n}permissionAddingTabs" class="portlet-section view-permissions" role="region">
@@ -301,12 +301,13 @@ up.jQuery(function() {
                 }
             },
             // Setting the top and bottom controls
-            sDom: 'r<"row alert alert-info view-filter"<"toolbar-filter"><W><"toolbar-br"><"dataTables-inline dataTables-left"p><"dataTables-inline dataTables-left"i><"dataTables-inline dataTables-left"l>><"row"<"span12"t>>>',
-            // Filtering
-            oColumnFilterWidgets: {
-                sSeparator: ',', // Used for multivalue column Categories
-                aiExclude: [config.column.placeHolderForEditLink,
-                            config.searchExclude]
+            sDom: 'r<"row alert alert-info view-filter"<"toolbar-filter"><P><"toolbar-br"><"dataTables-inline dataTables-left"p><"dataTables-inline dataTables-left"i><"dataTables-inline dataTables-left"l>><"row"<"span12"t>>>',
+            // SearchPanes configuration (modern replacement for ColumnFilterWidgets)
+            searchPanes: {
+                columns: [0, 2], // Owner and Activity columns
+                cascadePanes: true,
+                viewTotal: true,
+                layout: 'columns-2'
             }
         });
     };
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/edit-permission/editPermission.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/edit-permission/editPermission.jsp
index c4e4e16266d..873acd85b1f 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/edit-permission/editPermission.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/edit-permission/editPermission.jsp
@@ -33,16 +33,16 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
 | the user interface of this portlet
 | including HTML, CSS, JavaScript, accessibilty,
 | naming conventions, 3rd Party libraries
-| (like jQuery and the Fluid Skinning System)
+| (like jQuery and Bootstrap)
 | and more, refer to:
 | docs/SKINNING_UPORTAL.md
 -->
 
 <!-- Portlet -->
-<div class="fl-widget portlet prm-mgr view-editperm" role="section">
+<div class="card portlet prm-mgr view-editperm" role="section">
 
     <!-- Portlet Titlebar -->
-    <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead">
+    <div class="card-header titlebar portlet-titlebar" role="sectionhead">
     	<div class="breadcrumb">
             <c:forEach items="${ breadcrumbs }" var="breadcrumb" varStatus="status">
                 <portlet:actionURL var="breadcrumbUrl">
@@ -72,7 +72,7 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
     </div>
 
     <!-- Portlet Content -->
-    <div class="fl-widget-content content portlet-content">
+    <div class="card-body content portlet-content">
 
             <form method="POST" id="${n}editPermissionForm" action="javascript:;">
 
@@ -176,7 +176,7 @@ up.jQuery(function() {
             );
     };
 
-    $(document).ready(renderPermissionMap);
+    $(renderPermissionMap);
 
 
 });
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/edit-portlet/choosePortlet.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/edit-portlet/choosePortlet.jsp
index 400fe7e403c..f81a2901f7e 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/edit-portlet/choosePortlet.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/edit-portlet/choosePortlet.jsp
@@ -32,12 +32,12 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
 | the user interface of this portlet
 | including HTML, CSS, JavaScript, accessibilty,
 | naming conventions, 3rd Party libraries
-| (like jQuery and the Fluid Skinning System)
+| (like jQuery and Bootstrap)
 | and more, refer to:
 | docs/SKINNING_UPORTAL.md
 -->
 <style>
-    .form-group {
+    .row {
         margin-top: 10px;
     }
     .buttons {
@@ -47,10 +47,10 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
 </style>
     
 <!-- Portlet -->
-<div class="fl-widget portlet ptl-mgr view-chooseportlet bootstrap-styles container-fluid" role="section">
+<div class="card portlet ptl-mgr view-chooseportlet bootstrap-styles container-fluid" role="section">
     <div class="row">
         <!-- Portlet Titlebar -->
-        <div class="fl-widget-titlebar titlebar portlet-titlebar col-md-12" role="sectionhead">
+        <div class="card-header titlebar portlet-titlebar col-md-12" role="sectionhead">
             <h2 class="title" role="heading">
                 <spring:message code="register.new.portlet"/>
             </h2>
@@ -58,26 +58,26 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
     </div>
 
     <!-- Portlet Content -->
-    <div class="fl-widget-content content portlet-content row">
+    <div class="card-body content portlet-content row">
 
         <!-- Portlet Messages -->
         <spring:hasBindErrors name="portlet">
-            <div class="col-md-6 col-md-offset-2">
+            <div class="col-md-6 offset-md-2">
                 <div class="portlet-msg-error portlet-msg error alert alert-danger" role="alert">
                     <form:errors path="*" element="div" />
                 </div> <!-- end: portlet-msg -->
             </div>
         </spring:hasBindErrors>
 
-        <form action="${queryUrl}" method="POST" class="form-horizontal" role="form">
+        <form action="${queryUrl}" method="POST" class="" role="form">
 
             <!-- Title -->
             <div class="titlebar">
                 <h3 class="title" role="heading"><spring:message code="summary.information"/></h3>
             </div>
             <!-- Application Dropdown -->
-            <div class="form-group">
-                <div class=" col-md-3"><label> <spring:message code="application.information"/>
+            <div class="row mb-3">
+                <div class="col-md-3"><label class="form-label"> <spring:message code="application.information"/>
                     <select name="application" class="form-control">
                         <c:forEach items="${contexts}" var="context">
                             <option value="${fn:escapeXml(context.name)}">${fn:escapeXml(context.name)}</option>
@@ -87,8 +87,8 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
                 </div>
             </div>
             <!-- Portlet Dropdown -->
-            <div class="form-group">
-                <div class="col-md-3"><label><spring:message code="portlet.information"/>
+            <div class="row mb-3">
+                <div class="col-md-3"><label class="form-label"><spring:message code="portlet.information"/>
                     <select name="portlet" class="form-control col-md-4"> 
                         <c:forEach items="${contexts[0].portlets}" var="portlet">
                             <option value="${fn:escapeXml(portlet.portletName)}
@@ -100,7 +100,7 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
                 </div>
             </div>
             <!-- Buttons -->
-            <div class="form-group">
+            <div class="row mb-3">
                 <div class="buttons">
                     <c:choose>
                         <c:when test="${ completed }">
@@ -126,7 +126,7 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
 	        <c:forEach items="${contexts}" var="context">
 	            portlets['${context.name}'] = [<c:forEach items="${context.portlets}" var="portlet" varStatus="status">{name: '${portlet.portletName}', title: '${fn:length(portlet.displayNames) > 0 ? fn:replace(portlet.displayNames[0].displayName, "'", "\\'") : fn:replace(portlet.portletName, "'", "\\'")}'}${status.last ? '' : ','}</c:forEach>];
 		</c:forEach>
-	        $(document).ready(function(){
+	        $(function(){
 	            $("select[name=application]").change(function(){
 	                var select = $("select[name=portlet]").html("");
 	                var p = portlets[$(this).val()];
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/edit-portlet/chooseType.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/edit-portlet/chooseType.jsp
index 6167bdf22b7..ac6be3848b5 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/edit-portlet/chooseType.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/edit-portlet/chooseType.jsp
@@ -32,23 +32,23 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
 | the user interface of this portlet
 | including HTML, CSS, JavaScript, accessibilty,
 | naming conventions, 3rd Party libraries
-| (like jQuery and the Fluid Skinning System)
+| (like jQuery and Bootstrap)
 | and more, refer to:
 | docs/SKINNING_UPORTAL.md
 -->
     
 <!-- Portlet -->
-<div class="fl-widget portlet ptl-mgr view-choosetype" role="section">
+<div class="card portlet ptl-mgr view-choosetype" role="section">
 
 	<!-- Portlet Titlebar -->
-  <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead">
+  <div class="card-header titlebar portlet-titlebar" role="sectionhead">
   	<h2 class="title" role="heading">
         <spring:message code="${ completed ? 'edit.portlet' : 'register.new.portlet' }"/>
     </h2>
   </div> <!-- end: portlet-titlebar -->
   
 	<!-- Portlet Content -->
-  <div class="fl-widget-content content portlet-content">
+  <div class="card-body content portlet-content">
      
     <form:form modelAttribute="portlet" action="${queryUrl}" method="POST">
 	
@@ -81,8 +81,8 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
                   <td align="center">
                     <form:radiobutton id="${chanTypeEntry.key.id}" path="typeId" value="${chanTypeEntry.key.id}" cssClass="portlet-form-input-field"/>
                   </td>
-                  <td><label for="${chanTypeEntry.key.id}"><c:out value="${chanTypeEntry.key.name}" /></label></td>
-                  <td><label for="${chanTypeEntry.key.id}"><c:out value="${chanTypeEntry.key.description}" /></label></td>
+                  <td><label for="${chanTypeEntry.key.id}" class="form-label"><c:out value="${chanTypeEntry.key.name}" /></label></td>
+                  <td><label for="${chanTypeEntry.key.id}" class="form-label"><c:out value="${chanTypeEntry.key.description}" /></label></td>
                 </tr>
             </c:forEach>
           </tbody>
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/edit-portlet/configMode.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/edit-portlet/configMode.jsp
index 1060125fbb8..6a4c2d1bd67 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/edit-portlet/configMode.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/edit-portlet/configMode.jsp
@@ -32,23 +32,23 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
 | the user interface of this portlet
 | including HTML, CSS, JavaScript, accessibilty,
 | naming conventions, 3rd Party libraries
-| (like jQuery and the Fluid Skinning System)
+| (like jQuery and Bootstrap)
 | and more, refer to:
 | docs/SKINNING_UPORTAL.md
 -->
 
 <!-- Portlet -->
-<div class="fl-widget portlet ptl-mgr view-configmode" role="section">
+<div class="card portlet ptl-mgr view-configmode" role="section">
 
   <!-- Portlet Titlebar -->
-  <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead">
+  <div class="card-header titlebar portlet-titlebar" role="sectionhead">
     <h2 class="title" role="heading">
       <spring:message code="edit.portlet.configuration"/>
     </h2>
   </div> <!-- end: portlet-titlebar -->
 
   <!-- Portlet Content -->
-  <div class="fl-widget-content content portlet-content">
+  <div class="card-body content portlet-content">
     <up:render-delegate fname="${PORTLET_FNAME}" portletMode="CONFIG" windowState="maximized">
         <up:parent-url>
             <up:param name="execution" value="${flowExecutionKey}"/>
@@ -56,6 +56,15 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
         </up:parent-url>
     </up:render-delegate>
 
+    <!-- Configuration Navigation Buttons -->
+    <div class="buttons config-mode-buttons">
+        <form action="${navigationUrl}" method="post">
+            <input type="hidden" name="execution" value="${flowExecutionKey}"/>
+            <input class="button btn btn-primary" type="submit" value="<spring:message code='save'/>" name="_eventId_update"/>
+            <input class="button btn btn-link" type="submit" value="<spring:message code='return.without.saving'/>" name="_eventId_cancel"/>
+        </form>
+    </div>
+
   </div> <!-- end: portlet-content -->
 
 </div> <!-- end: portlet -->
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/edit-portlet/portletConfig.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/edit-portlet/portletConfig.jsp
index 2f76e818f3e..15e6520d83e 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/edit-portlet/portletConfig.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/edit-portlet/portletConfig.jsp
@@ -45,28 +45,43 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
 | the user interface of this portlet
 | including HTML, CSS, JavaScript, accessibilty,
 | naming conventions, 3rd Party libraries
-| (like jQuery and the Fluid Skinning System)
+| (like jQuery and Bootstrap)
 | and more, refer to:
 | docs/SKINNING_UPORTAL.md
 --%>
 
 <%-- Styles specific to this portlet --%>
-
-<div class="fl-widget portlet ptl-mgr" id="${n}">
-
-<form:form modelAttribute="portlet" action="${queryUrl}" method="POST" role="form" class="form-horizontal portlet-config">
+<style>
+/* Large radio buttons for lifecycle management */
+.lifecycle-state[type="radio"] {
+    appearance: radio !important;
+    -webkit-appearance: radio !important;
+    width: 20px !important;
+    height: 20px !important;
+    transform: scale(1.5) !important;
+    margin: 8px !important;
+    cursor: pointer !important;
+    border: none !important;
+    background: none !important;
+    padding: 0 !important;
+}
+</style>
+
+<div class="card portlet ptl-mgr" id="${n}">
+
+<form:form modelAttribute="portlet" action="${queryUrl}" method="POST" role="form" class="portlet-config">
     <!-- Portlet -->
     <div class="view-basicinfo" role="section">
 
         <!-- Portlet Titlebar -->
-        <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead">
+        <div class="card-header titlebar portlet-titlebar" role="sectionhead">
             <h2 class="title" role="heading">
                 <spring:message code="${ completed ? 'edit.portlet' : 'register.new.portlet' }"/>
             </h2>
         </div> <!-- end: portlet-titlebar -->
 
         <!-- Portlet Content -->
-        <div class="fl-widget-content content portlet-content">
+        <div class="card-body content portlet-content">
 
             <!-- Portlet Messages -->
             <spring:hasBindErrors name="portlet">
@@ -86,52 +101,52 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
                         <div class="titlebar">
                             <h3 class="title" role="heading"><spring:message code="summary.information"/></h3>
                         </div>
-                        <div class="form-group">
-                            <span class="col-sm-4 control-label">
-                                <label for="portletTitle"><spring:message code="portlet.title"/></label>
+                        <div class="row mb-3">
+                            <span class="col-sm-4 col-form-label">
+                                <label for="portletTitle" class="form-label"><spring:message code="portlet.title"/></label>
                                 <span class="glyphicon glyphicon-info-sign"
-                        title="<spring:message code='portlet.title.tooltip'/>" data-toggle="tooltip"
-                        data-placement="top"></span>
+                        title="<spring:message code='portlet.title.tooltip'/>" data-bs-toggle="tooltip"
+                        data-bs-placement="top"></span>
                             </span>
                             <div class="col-sm-8">
                                 <form:input path="title" type="text" class="form-control" id="portletTitle" autocomplete="off" autocorrect="off"/>
                             </div>
                         </div>
-                        <div class="form-group">
-                            <span class="col-sm-4 control-label">
-                                <label for="portletName"><spring:message code="portlet.name"/></label>
+                        <div class="row mb-3">
+                            <span class="col-sm-4 col-form-label">
+                                <label for="portletName" class="form-label"><spring:message code="portlet.name"/></label>
                                 <span class="glyphicon glyphicon-info-sign"
-                            title="<spring:message code='portlet.name.tooltip'/>" data-toggle="tooltip"
-                            data-placement="top"></span>
+                            title="<spring:message code='portlet.name.tooltip'/>" data-bs-toggle="tooltip"
+                            data-bs-placement="top"></span>
                             </span>
                             <div class="col-sm-8">
                                 <form:input path="name" type="text" class="form-control" id="portletName" autcomplete="off" autocorrect="off"/>
                             </div>
                         </div>
-                        <div class="form-group name-title-mismatch-warn" style="display: none">
+                        <div class="row mb-3 name-title-mismatch-warn" style="display: none">
                             <div class="col-sm-12">
                                 <div class="alert alert-info">
                                     <spring:message code="portlet.name.title.mismatch"/>
                                 </div>
                             </div>
                         </div>
-                        <div class="form-group">
-                            <span class="col-sm-4 control-label">
-                                <label for="portletFname"><spring:message code="portlet.functional.name"/></label>
+                        <div class="row mb-3">
+                            <span class="col-sm-4 col-form-label">
+                                <label for="portletFname" class="form-label"><spring:message code="portlet.functional.name"/></label>
                                 <span class="glyphicon glyphicon-info-sign"
-                                title="<spring:message code='portlet.functional.name.tooltip'/>" data-toggle="tooltip"
-                                data-placement="top"></span>
+                                title="<spring:message code='portlet.functional.name.tooltip'/>" data-bs-toggle="tooltip"
+                                data-bs-placement="top"></span>
                             </span>
                             <div class="col-sm-8">
                                 <form:input path="fname" type="text" class="form-control" id="portletFname" autcomplete="off" autocorrect="off"/>
                             </div>
                         </div>
-                        <div class="form-group">
-                            <span class="col-sm-4 control-label">
-                                <label for="portletDescription"><spring:message code="portlet.description"/></label>
+                        <div class="row mb-3">
+                            <span class="col-sm-4 col-form-label">
+                                <label for="portletDescription" class="form-label"><spring:message code="portlet.description"/></label>
                                 <span class="glyphicon glyphicon-info-sign"
-                                title="<spring:message code='portlet.description.tooltip'/>" data-toggle="tooltip"
-                                data-placement="top"></span>
+                                title="<spring:message code='portlet.description.tooltip'/>" data-bs-toggle="tooltip"
+                                data-bs-placement="top"></span>
                             </span>
                             <div class="col-sm-8">
                                 <form:input path="description" type="text" class="form-control" id="portletDescription" autcomplete="off" autocorrect="off"/>
@@ -143,31 +158,31 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
                         <div class="titlebar">
                             <h3 class="title" role="heading"><spring:message code="controls"/></h3>
                         </div>
-                        <div class="form-group">
-                            <label for="portletControls" class="col-sm-3 control-label"><spring:message
+                        <div class="row mb-3">
+                            <label for="portletControls" class="col-sm-3 col-form-label"><spring:message
                         code="portlet.controls"/></label>
 
                             <div class="col-sm-9">
-                                <div class="checkbox">
-                                    <label for="hasHelp">
+                                <div class="form-check">
+                                    <label for="hasHelp" class="form-check-label">
                                         <form:checkbox path="hasHelp"/>
                                         <spring:message code="hasHelp"/>
                                     </label>
                                 </div>
-                                <div class="checkbox">
-                                    <label for="editable">
+                                <div class="form-check">
+                                    <label for="editable" class="form-check-label">
                                         <form:checkbox path="editable"/>
                                         <spring:message code="editable"/>
                                     </label>
                                 </div>
-                                <div class="checkbox">
-                                    <label for="configurable">
+                                <div class="form-check">
+                                    <label for="configurable" class="form-check-label">
                                         <form:checkbox path="configurable"/>
                                         <spring:message code="configurable"/>
                                     </label>
                                 </div>
-                                <div class="checkbox">
-                                    <label for="hasAbout">
+                                <div class="form-check">
+                                    <label for="hasAbout" class="form-check-label">
                                         <form:checkbox path="hasAbout"/>
                                         <spring:message code="hasAbout"/>
                                     </label>
@@ -181,43 +196,45 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
     </div> <!-- end: portlet -->
 
     <!-- Portlet -->
-    <div class="fl-widget portlet ptl-mgr view-setparameters" role="section">
+    <div class="card portlet ptl-mgr view-setparameters" role="section">
         <!-- Portlet Content -->
-        <div class="fl-widget-content content portlet-content">
+        <div class="card-body content portlet-content">
 
             <!-- Add a note to the page if the portlet supports config mode  -->
             <c:if test="${supportsConfig}">
                 <div class="portlet-msg-info portlet-msg info" role="alert">
                     <p class="text-info">
-                        <span class="label label-info"><spring:message code="note"/></span>
+                        <span class="badge bg-info"><spring:message code="note"/></span>
                         <spring:message code="this.portlet.supports.rich.config.message"/>
                     </p>
                 </div>
             </c:if>
-            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
-                <div class="panel panel-info">
-                    <div class="panel-heading" role="tab" id="portletConfigAccordionHeading">
-                        <h4 class="panel-title">
-                            <i class="fa fa-chevron-up"></i> <a data-toggle="collapse" data-parent="#accordion" href="#portletConfigAccordion" aria-expanded="true" aria-controls="portletConfigAccordion">Advanced Options</a>
+            <div class="accordion" id="accordion" role="tablist" aria-multiselectable="true">
+                <div class="card">
+                    <div class="card-header" role="tab" id="portletConfigAccordionHeading">
+                        <h4 class="card-title">
+                            <a data-bs-toggle="collapse" data-bs-parent="#accordion" href="#portletConfigAccordion" aria-expanded="false" aria-controls="portletConfigAccordion">
+                                <i class="fa fa-chevron-down"></i> Advanced Options
+                            </a>
                         </h4>
                     </div>
-                    <div id="portletConfigAccordion" class="panel-collapse collapse" role="tabpanel" aria-labelledby="portletConfigAccordionHeading">
-                        <div class="panel-body">
+                    <div id="portletConfigAccordion" class="collapse" role="tabpanel" aria-labelledby="portletConfigAccordionHeading">
+                        <div class="card-body">
                             <div class="portlet-section" role="region">
                                 <div class="titlebar">
                                     <h3 class="title" role="heading"><spring:message code="portlet.options" text="Portlet Options"/></h3>
                                 </div>
                                 <div class="portlet-section" role="region">
-                                    <div class="form-group">
-                                        <span class="col-sm-2 control-label">
-                                            <label for="portletTimeout">
+                                    <div class="row mb-3">
+                                        <span class="col-sm-2 col-form-label">
+                                            <label for="portletTimeout" class="form-label">
                                                 <spring:message code="portlet.timeout"/>
                                             </label>
                                             <span
                                                 aria-label="<spring:message code='portlet.timeout.tooltip'/>"
                                                 class="glyphicon glyphicon-info-sign"
-                                                data-placement="top"
-                                                data-toggle="tooltip"
+                                                data-bs-placement="top"
+                                                data-bs-toggle="tooltip"
                                                 title="<spring:message code='portlet.timeout.tooltip'/>">
                                             </span>
                                         </span>
@@ -249,7 +266,7 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
                                                 <c:forEach items="${ portletDescriptor.portletPreferences.portletPreferences }" var="pref">
                                                     <tr class="${ up:containsKey(portlet.portletPreferences, pref.name) ? 'override-preference' : '' }">
                                                         <td class="preference-name">
-                                                            <div class="control-label">
+                                                            <div class="col-form-label">
                                                                 ${ fn:escapeXml(pref.name) }
                                                             </div>
                                                         </td>
@@ -281,7 +298,7 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
                                         <!-- Portlet Display Settings -->
                                         <c:if test="${ fn:length(step.parameters) > 0 }">
                                             <div class="portlet-table">
-                                                <table class=" table table-hover" summary="<spring:message code='this.table.lists.portlet.parameters'/>">
+                                                <table class="table table-hover" summary="<spring:message code='this.table.lists.portlet.parameters'/>">
                                                     <thead>
                                                         <tr>
                                                             <th width="30%"><spring:message code="parameter"/></th>
@@ -297,16 +314,16 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
                                                                 </c:when>
                                                                 <c:otherwise>
                                                                     <tr>
-                                                                        <td class="text-right">
-                                                                            <div class="control-label">
-                                                                                <label for="step-parameter-${ status.index }">
+                                                                        <td class="text-end">
+                                                                            <div class="col-form-label">
+                                                                                <label for="step-parameter-${ status.index }" class="form-label">
                                                                                     <spring:message code="${parameter.label}"/>
                                                                                 </label>
                                                                                 <c:if test="${not empty parameter.description}">
                                                                                     <span class="glyphicon glyphicon-info-sign"
                                                                                           title="${fn:escapeXml(parameter.description)}"
-                                                                                          data-toggle="tooltip"
-                                                                                          data-placement="top">
+                                                                                          data-bs-toggle="tooltip"
+                                                                                          data-bs-placement="top">
                                                                                     </span>
                                                                                 </c:if>
                                                                             </div>
@@ -346,15 +363,15 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
                                                                     <c:otherwise>
                                                                         <tr>
                                                                             <td class="preference-name">
-                                                                                <div class="control-label">
-                                                                                    <label for="preference-input-${ status.index }">
+                                                                                <div class="col-form-label">
+                                                                                    <label for="preference-input-${ status.index }" class="form-label">
                                                                                         <spring:message code="${ preference.label }" text="${ preference.label }"/>
                                                                                     </label>
                                                                                     <c:if test="${not empty preference.description}">
                                                                                         <span class="glyphicon glyphicon-info-sign"
                                                                                               title="${fn:escapeXml(preference.description)}"
-                                                                                              data-toggle="tooltip"
-                                                                                              data-placement="top">
+                                                                                              data-bs-toggle="tooltip"
+                                                                                              data-bs-placement="top">
                                                                                         </span>
                                                                                     </c:if>
                                                                                 </div>
@@ -391,7 +408,7 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
                                                                 <c:set var="overrideParamPath" value="portletPreferenceReadOnly['${ name }'].value"/>
                                                                 <tr>
                                                                     <td class="preference-name">
-                                                                        <div class="control-label">
+                                                                        <div class="col-form-label">
                                                                             ${ fn:escapeXml(name) }
                                                                         </div>
                                                                     </td>
@@ -399,14 +416,14 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
                                                                         <c:forEach items="${ portlet.portletPreferences[name].value }" var="val">
                                                                             <div>
                                                                                 <input class="form-control parameter-editor-value" name="portletPreferences['${fn:escapeXml(name)}'].value" value="${ fn:escapeXml(val) }"/>
-                                                                                <a class="delete-parameter-value-link btn btn-xs btn-default" href="javascript:void(0)">
+                                                                                <a class="delete-parameter-value-link btn btn-sm btn-secondary" href="javascript:void(0)">
                                                                                     <spring:message code="remove" text="Remove"/>
                                                                                     <i class="fa fa-minus-circle"></i>
                                                                                 </a>
                                                                             </div>
                                                                         </c:forEach>
                                                                         <input type="hidden" class="form-control" name="portletPreferences['${fn:escapeXml(name)}'].value" value=""/>
-                                                                        <a class="add-parameter-value-link btn btn-xs btn-info" href="javascript:void(0)" paramName="${fn:escapeXml(name)}">
+                                                                        <a class="add-parameter-value-link btn btn-sm btn-info" href="javascript:void(0)" paramName="${fn:escapeXml(name)}">
                                                                             <spring:message code="add.value" text="Add value"/>
                                                                             <i class="fa fa-plus-circle"></i>
                                                                         </a>
@@ -428,17 +445,17 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
                                     </div> <!-- end: content -->
                                 </div> <!-- end: portlet-section -->
                             </c:forEach> <!-- end: (step loop) -->
-                        </div>  <!-- end: panel-body -->
-                    </div> <!-- end: panel-collapse -->
-                </div> <!-- end: panel -->
+                        </div>  <!-- end: card-body -->
+                    </div> <!-- end: collapse -->
+                </div> <!-- end: card -->
             </div> <!-- end: accordion -->
         </div> <!-- end: portlet-content -->
     </div> <!-- end: portlet -->
 
     <!-- Portlet config Permissions and categories -->
-    <div id="${n}PortletPrincipalsCategories" class="fl-widget portlet ptl-mgr view-principals-cats" role="section">
+    <div id="${n}PortletPrincipalsCategories" class="card portlet ptl-mgr view-principals-cats" role="section">
         <!-- Portlet Content -->
-        <div class="fl-widget-content content portlet-content">
+        <div class="card-body content portlet-content">
             <!-- Portlet Section -->
             <div class="portlet-section" role="region">
                 <div class="titlebar">
@@ -450,34 +467,34 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
 
                     <!-- Portlet principals -->
                     <div class="col-md-6">
-                        <div class="form-group">
-                            <label class="col-sm-3 control-label h4"><spring:message code="principals"/></label>
+                        <div class="row mb-3">
+                            <label class="col-sm-3 col-form-label h4"><spring:message code="principals"/></label>
                             <div class="col-sm-9">
                                 <button type="submit" class="button btn btn-primary" name="_eventId_choosePrincipal"><spring:message code="edit.principals"/>&nbsp;&nbsp;<i class="fa fa-users"></i></button>
                                 <c:if test="${empty portlet.principals}">
                                     <p class="text-warning">You should specify a principal or no one will be able to view the portlet</p>
                                 </c:if>
-                                    <table class="table table-condensed permissions-options-table">
+                                    <table class="table table-sm permissions-options-table">
                                         <thead>
                                             <tr>
                                                 <td class="col-sm-3"></td>
                                                 <td class="col-sm-3 text-nowrap">
                                                     <spring:message code="edit.browse"/>
-                                                    <a href="javascript:void(0)" data-toggle="tooltip" data-placement="top" title="<spring:message code='edit.browse.tooltip'/>">
-                                                        <i class="fa fa-info-circle" aria-hidden="true"></i> <span class="sr-only"><spring:message code='edit.browse.tooltip'/></span>
+                                                    <a href="javascript:void(0)" data-bs-toggle="tooltip" data-bs-placement="top" title="<spring:message code='edit.browse.tooltip'/>">
+                                                        <i class="fa fa-info-circle" aria-hidden="true"></i> <span class="visually-hidden"><spring:message code='edit.browse.tooltip'/></span>
                                                     </a>
                                                 </td>
                                                 <td class="col-sm-3 text-nowrap">
                                                     <spring:message code="edit.subscribe"/>
-                                                    <a href="javascript:void(0)" data-toggle="tooltip" data-placement="top" title="<spring:message code='edit.subscribe.tooltip'/>">
-                                                        <i class="fa fa-info-circle" aria-hidden="true"></i> <span class="sr-only"><spring:message code='edit.subscribe.tooltip'/></span>
+                                                    <a href="javascript:void(0)" data-bs-toggle="tooltip" data-bs-placement="top" title="<spring:message code='edit.subscribe.tooltip'/>">
+                                                        <i class="fa fa-info-circle" aria-hidden="true"></i> <span class="visually-hidden"><spring:message code='edit.subscribe.tooltip'/></span>
                                                      </a>
                                                 </td>
                                                 <td class="col-sm-3 text-nowrap">
                                                     <c:if test="${supportsConfig}">
                                                         <spring:message code="edit.configure"/>
-                                                        <a href="javascript:void(0)" data-toggle="tooltip" data-placement="top" title="<spring:message code='edit.configure.tooltip'/>">
-                                                            <i class="fa fa-info-circle" aria-hidden="true"></i> <span class="sr-only"><spring:message code='edit.configure.tooltip'/></span>
+                                                        <a href="javascript:void(0)" data-bs-toggle="tooltip" data-bs-placement="top" title="<spring:message code='edit.configure.tooltip'/>">
+                                                            <i class="fa fa-info-circle" aria-hidden="true"></i> <span class="visually-hidden"><spring:message code='edit.configure.tooltip'/></span>
                                                         </a>
                                                     </c:if>
                                                 </td>
@@ -512,8 +529,8 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
 
                     <!-- Portlet categories -->
                     <div class="col-md-6">
-                        <div class="form-group">
-                            <label class="col-sm-3 control-label h4"><spring:message code="categories"/></label>
+                        <div class="row mb-3">
+                            <label class="col-sm-3 col-form-label h4"><spring:message code="categories"/></label>
                             <div class="col-sm-9">
                                 <button type="submit" class="button btn btn-primary" name="_eventId_chooseCategory"><spring:message code="edit.categories"/>&nbsp;&nbsp;<i class="fa fa-folder-open"></i></button>
                                 <%-- If there are no categories selected and there are no lifecycle states, the
@@ -541,9 +558,9 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
     </div>
 
     <!-- Portlet Lifecycle -->
-    <div id="${n}PortletLifecycle" class="fl-widget portlet ptl-mgr view-lifecycle" role="section">
+    <div id="${n}PortletLifecycle" class="card portlet ptl-mgr view-lifecycle" role="section">
         <!-- Portlet Content -->
-        <div class="fl-widget-content content portlet-content">
+        <div class="card-body content portlet-content">
             <!-- Portlet Section -->
             <div class="portlet-section" role="region">
                 <div class="titlebar">
@@ -579,7 +596,7 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
                                             cssClass="portlet-form-input-field lifecycle-state"/>
                                     </td>
                                     <td>
-                                        <label for="lifecycle-${lifecycleState}">
+                                        <label for="lifecycle-${lifecycleState}" class="form-label">
                                             <spring:message code="lifecycle.name.${ lifecycleState }"/>
                                         </label>
                                     </td>
@@ -612,8 +629,8 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
                         </thead>
                         <tbody>
                         <tr>
-                            <td class="fl-text-align-right">
-                                <label for="autoPublishDate">
+                            <td class="text-end">
+                                <label for="autoPublishDate" class="form-label">
                                     <spring:message code="auto.publish.date.time"/>
                                 </label>
                             </td>
@@ -664,8 +681,8 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
                         </thead>
                         <tbody>
                             <tr>
-                                <td class="fl-text-align-right">
-                                    <label for="autoExpireDate">
+                                <td class="text-end">
+                                    <label for="autoExpireDate" class="form-label">
                                         <spring:message code="auto.expire.date.time"/></td>
                                     </label>
                                 <td>
@@ -716,8 +733,8 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
                         </thead>
                         <tbody>
                             <tr>
-                                <td class="fl-text-align-right">
-                                    <label for="customMaintenanceMessage">
+                                <td class="text-end">
+                                    <label for="customMaintenanceMessage" class="form-label">
                                         <spring:message code="custom.message"/></td>
                                     </label>
                                 <td>
@@ -726,7 +743,7 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
                             </tr>
                             <tr>
                                 <td>
-                                    <label for="stopImmediately">Stop Immediately</label>
+                                    <label for="stopImmediately" class="form-check-label">Stop Immediately</label>
                                 </td>
                                 <td>
                                     <form:checkbox path="stopImmediately" id="stopImmediately"/>
@@ -734,7 +751,7 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
                             </tr>
                             <tr>
                                 <td>
-                                    <label for="stopDate">Stop Date</label>
+                                    <label for="stopDate" class="form-label">Stop Date</label>
                                 </td>
                                 <td>
                                     <form:input title="mm/dd/yyyy" type="text" path="stopDate" id="stopDate" cssClass="cal-datepicker"/>
@@ -742,7 +759,7 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
                             </tr>
                             <tr>
                                 <td>
-                                    <label for="stopTime">Stop Time</label>
+                                    <label for="stopTime" class="form-label">Stop Time</label>
                                 </td>
                                 <td>
                                     <form:input type="time" path="stopTime" id="stopTime"/>
@@ -750,7 +767,7 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
                             </tr>
                             <tr>
                                 <td>
-                                    <label for="restartManually">Restart Manually</label>
+                                    <label for="restartManually" class="form-check-label">Restart Manually</label>
                                 </td>
                                 <td>
                                     <form:checkbox path="restartManually" id="restartManually"/>
@@ -758,7 +775,7 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
                             </tr>
                             <tr>
                                 <td>
-                                    <label for="restartDate">Restart Date</label>
+                                    <label for="restartDate" class="form-label">Restart Date</label>
                                 </td>
                                 <td>
                                     <form:input title="mm/dd/yyyy" type="text" path="restartDate" id="restartDate" cssClass="cal-datepicker"/>
@@ -766,7 +783,7 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
                             </tr>
                             <tr>
                                 <td>
-                                    <label for="restartTime">Restart Time</label>
+                                    <label for="restartTime" class="form-label">Restart Time</label>
                                 </td>
                                 <td>
                                     <form:input type="time" path="restartTime" id="restartTime"/>
@@ -815,7 +832,7 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
 </div>
 </div>
 
-<script src="media/skins/universality/common/javascript/uportal/up-parameter-editor.js" language="JavaScript" type="text/javascript"></script>
+
 <script type="text/javascript">
     (function ($, _, Backbone) {
         var titleSelector = '#portletTitle',
@@ -992,58 +1009,40 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
                 helpIconSelector = '#${n} .glyphicon-info-sign';
 
         /* Enable the help tooltips */
-        $(helpIconSelector).bootstrapTooltip({
+        $(helpIconSelector).tooltip({
             container: 'body',
             trigger: 'click'
         });
 
         // clicking anywhere on the page should dismiss the currently visible
         // tooltip.
-        $('body').click(function (evt) {
+        $('body').on('click', function (evt) {
             var $target = $(evt.target);
 
             $(helpIconSelector).each(function (idx, el) {
                 if (!$(el).is($target)) {
-                    $(el).bootstrapTooltip('hide');
+                    $(el).tooltip('hide');
                 }
             });
         });
 
-        $(document).ready(function () {
+        $(function () {
+            // Initialize modern parameter editors
             $("div.parameter-options-section").each(function () {
-                up.ParameterEditor(this, {
-                    parameterNamePrefix: $(this).attr("prefix"),
+                new ModernParameterEditor(this, {
                     parameterBindName: 'parameters',
                     auxiliaryBindName: 'parameterOverrides',
                     useAuxiliaryCheckbox: true,
-                    dialog: $("#${n}addParameterDialog-" + $(this).attr("dialog")),
-                    multivalued: false,
-                    messages: {
-                        remove: '<spring:message code="remove" htmlEscape="false" javaScriptEscape="true"/>',
-                        removeParameter: '<spring:message code="setParameters.deleteButton" htmlEscape="false" javaScriptEscape="true"/>',
-                        addValue: '<spring:message code="add.value" htmlEscape="false" javaScriptEscape="true"/>'
-                    }
+                    multivalued: false
                 });
             });
             $("div.preference-options-section").each(function () {
-                up.ParameterEditor(this, {
-                    displayClasses: {
-                        addValueLinkExtraClass: 'btn btn-xs btn-info',
-                        deleteValueLinkExtraClass: 'btn btn-xs btn-default',
-                        deleteItemLinkExtraClass: 'btn btn-warning',
-                        inputElementExtraClass: "form-control parameter-editor-value"
-                    },
+                new ModernParameterEditor(this, {
                     parameterBindName: 'portletPreferences',
                     auxiliaryBindName: 'portletPreferenceReadOnly',
                     useAuxiliaryCheckbox: true,
-                    dialog: $("#${n}addParameterDialog"),
-                    form: $("#${n}addParameterForm"),
                     multivalued: true,
-                    messages: {
-                        remove: '<spring:message code="remove" htmlEscape="false" javaScriptEscape="true"/>',
-                        removeParameter: '<spring:message code="setParameters.deleteButton" htmlEscape="false" javaScriptEscape="true"/>',
-                        addValue: '<spring:message code="add.value" htmlEscape="false" javaScriptEscape="true"/>'
-                    }
+                    dialog: document.getElementById('${n}addParameterDialog')
                 });
             });
 
@@ -1058,7 +1057,7 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
 
     up.jQuery(function () {
         var $ = up.jQuery;
-        $(document).ready(function () {
+        $(function () {
             var updateOptionalInputs = function () {
                 var lifecycle = $('#${n}PortletLifecycle .lifecycle-state:checked').val();
                 $('#${n}PortletLifecycle #publishingDateSection').css('display', lifecycle == "APPROVED" ? "block" : "none");
@@ -1073,16 +1072,16 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
                 const curDate = new Date();
                 $("#${n}PortletLifecycle #timezoneOffsetInHours").val(curDate.getTimezoneOffset() / 60);
             }
-            $("#${n}PortletLifecycle .clear-date").click(function (e) {
+            $("#${n}PortletLifecycle .clear-date").on('click', function (e) {
                 e.preventDefault();
                 $(this).parent().css("display", "none").prev().val("");
             });
-            $("#${n}PortletLifecycle .lifecycle-state").click(function () {
+            $("#${n}PortletLifecycle .lifecycle-state").on('click', function () {
                 updateOptionalInputs();
             });
             updateOptionalInputs();
 
-            $('[data-toggle="tooltip"]').tooltip();
+            $('[data-bs-toggle="tooltip"]').tooltip();
         });
 
         // maintenance scheduler rendering
@@ -1112,7 +1111,7 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
             }
         }
 
-        $('.lifecycle-state').click(function() {
+        $('.lifecycle-state').on('click', function() {
             if ($('#lifecycle-MAINTENANCE').is(":checked")) {
                 return;
 			}
@@ -1122,15 +1121,15 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
 			resetRestartManually(true);
         });
 
-        $(stopImmediatelyFieldName).click(function() {
+        $(stopImmediatelyFieldName).on('click', function() {
             resetStopImmediately($(stopImmediatelyFieldName).is(':checked'));
         })
 
-        $(restartManuallyFieldName).click(function() {
+        $(restartManuallyFieldName).on('click', function() {
             resetRestartManually($(restartManuallyFieldName).is(':checked'));
         });
 
-        $("#cancelStopDate").click(function() {
+        $("#cancelStopDate").on('click', function() {
 			$(stopImmediatelyFieldName).prop("checked", true);
 			resetStopImmediately(true);
             $(restartManuallyFieldName).prop("checked", true);
@@ -1143,13 +1142,8 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
         resetStopImmediately($(stopImmediatelyFieldName).is(':checked'));
         resetRestartManually($(restartManuallyFieldName).is(':checked'));
 
-        function toggleChevron(e) {
-            $(e.target)
-            .prev('.panel-heading')
-            .find("i.fa")
-            .toggleClass('fa-chevron-down fa-chevron-up');
-            }
-        $('#accordion').on('hidden.bs.collapse', toggleChevron);
-        $('#accordion').on('shown.bs.collapse', toggleChevron);
+        $('#accordion a[data-bs-toggle="collapse"]').on('click', function(e) {
+            $(this).find('i.fa').toggleClass('fa-chevron-down fa-chevron-up');
+        });
     });
 </script>
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/entity-selector/selectEntities.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/entity-selector/selectEntities.jsp
index e6934df7e3c..92b6a1fa2f6 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/entity-selector/selectEntities.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/entity-selector/selectEntities.jsp
@@ -34,54 +34,54 @@
 | PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
 | For the standards and guidelines that govern the user interface of this portlet
 | including HTML, CSS, JavaScript, accessibility, naming conventions, 3rd Party libraries
-| (like jQuery and the Fluid Skinning System) and more, refer to:
+| (like jQuery and Bootstrap) and more, refer to:
 | docs/SKINNING_UPORTAL.md
 -->
 
 <!--
 | Portlet.
 ================================================-->
-<div class="fl-widget portlet grp-mgr view-selectgroups" role="section">
+<div class="card portlet grp-mgr view-selectgroups" role="section">
     <!--titlebar-->
-    <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead">
+    <div class="card-header titlebar portlet-titlebar" role="sectionhead">
         <h2 class="title" role="heading"><spring:message code="${pageTitleCode}" text="${pageTitleText}"/></h2>
         <h3 class="subtitle"><spring:message code="${pageSubtitleCode}" arguments="${pageSubtitleArgument}" text="${pageSubtitleText}"/></h3>
     </div>
     <!--content-->
     <!-- If Adhoc group is created successfully -->
     <div id="${n}alertSuccess" class="alert alert-success alert-dismissible" role="alert" style="display:none;">
-        <button type="button" class="close" onclick="$(this).parent().hide();" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+        <button type="button" class="btn-close" onclick="$(this).parent().hide();" aria-label="Close"></button>
         <p><i class="fa fa-check-circle">Adhoc group created successfully!</i></p>
     </div>
 
     <!-- Else if there is problem with the parent -->
     <div id="${n}alertInvalidParent" class="alert alert-danger alert-dismissible" role="alert" style="display:none;">
-        <button type="button" class="close" onclick="$(this).parent().hide();" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+        <button type="button" class="btn-close" onclick="$(this).parent().hide();" aria-label="Close"></button>
         <p><i class="fa fa-exclamation-circle">There is a problem with the parent group.</i></p>
     </div>
 
     <!-- Else if there is an existing group -->
     <div id="${n}alertGroupExists" class="alert alert-danger alert-dismissible" role="alert" style="display:none;">
-        <button type="button" class="close" onclick="$(this).parent().hide();" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+        <button type="button" class="btn-close" onclick="$(this).parent().hide();" aria-label="Close"></button>
         <p><i class="fa fa-exclamation-circle">There is a group that already exists with that name.</i></p>
     </div>
 
     <!-- Else if user is unauthorized -->
     <div id="${n}alertUnauthorized" class="alert alert-danger alert-dismissible" role="alert" style="display:none;">
-        <button type="button" class="close" onclick="$(this).parent().hide();" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+        <button type="button" class="btn-close" onclick="$(this).parent().hide();" aria-label="Close"></button>
         <p><i class="fa fa-exclamation-circle">You are unauthorized to to complete this process.</i></p>
     </div>
 
     <!-- Else if unknown error -->
     <div id="${n}alertUnknown" class="alert alert-danger alert-dismissible" role="alert" style="display:none;">
-        <button type="button" class="close" onclick="$(this).parent().hide();" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+        <button type="button" class="btn-close" onclick="$(this).parent().hide();" aria-label="Close"></button>
         <p><i class="fa fa-exclamation-circle">Unknown error. Contact your administrator.</i></p>
     </div>
 
-    <div id="${n}chooseGroupsBody" class="fl-widget-content content portlet-content container-fluid">
+    <div id="${n}chooseGroupsBody" class="card-body content portlet-content container-fluid">
         <div class="${selectionMode ? 'view-multi-select' : 'view-single-select'}">
-            <div class="columns-2 row-fluid row">
-                <div class="fl-container-flex60 span8 col-md-8">
+            <div class="columns-2 row">
+                <div class="d-flex60 span8 col-md-8">
                     <!-- entity -->
                     <div id="${n}entityBrowserContent" class="entity-browser row">
                         <div class="content row">
@@ -89,11 +89,11 @@
                                 <div class="col-md-6">
                                     <h4 class="title">
                                         <span id="${n}currentEntityName"></span>
-                                        <button id="${n}currentSelectBtn" type="button" class="btn btn-success btn-xs">Add to Selection <i class="fa fa-plus-circle"></i></button>
+                                        <button id="${n}currentSelectBtn" type="button" class="btn btn-success btn-sm">Add to Selection <i class="fa fa-plus-circle"></i></button>
                                     </h4>
                                 </div>
                                 <div id="${n}portletSearch" class="portlet-search">
-                                    <form id="${n}searchForm" class="form-inline" role="form">
+                                    <form id="${n}searchForm" class="d-flex align-items-center gap-2" role="form">
                                         <input type="search" class="form-control" name="searchterm" placeholder="<spring:message code="enter.name"/>" aria-label="<spring:message code="enter.name"/>"/>
                                         <input type="submit" class="button btn" value="<spring:message code="go"/>" />
                                     </form>
@@ -116,31 +116,31 @@
                                         <c:when test="${type == 'group'}">
                                             <div class="group col-md-12">
                                                 <h6 class="title"><spring:message code="groups"/></h6>
-                                                <table class="table table-condensed table-striped member-list"></table>
+                                                <table class="table table-sm table-striped member-list"></table>
                                                 <p class="no-members" style="display:none"><spring:message code="no.member.subgroups"/></p>
                                                 <div id="${n}adHocCreate" class="col-md-4">
-                                                    <button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#adhocGroupModal">Add Custom Group <i class="fa fa-plus-circle"></i></button>
+                                                    <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#adhocGroupModal">Add Custom Group <i class="fa fa-plus-circle"></i></button>
                                                 </div>
                                             </div>
                                         </c:when>
                                         <c:when test="${type == 'person'}">
                                             <div class="person col-md-12">
                                                 <h6 class="title"><spring:message code="people"/></h6>
-                                                <table class="table table-condensed table-striped member-list"></table>
+                                                <table class="table table-sm table-striped member-list"></table>
                                                 <p class="no-members" style="display:none"><spring:message code="no.direct.member.people"/></p>
                                             </div>
                                         </c:when>
                                         <c:when test="${type == 'category'}">
                                             <div class="category col-md-12">
                                                 <h6 class="title"><spring:message code="categories"/></h6>
-                                                <table class="table table-condensed table-striped member-list"></table>
+                                                <table class="table table-sm table-striped member-list"></table>
                                                 <p class="no-members" style="display:none"><spring:message code="no.member.subcategories"/></p>
                                             </div>
                                         </c:when>
                                         <c:when test="${type == 'portlet'}">
                                             <div class="portlet col-md-12">
                                                 <h6 class="title"><spring:message code="portlets"/></h6>
-                                                <table class="table table-condensed table-striped member-list"></table>
+                                                <table class="table table-sm table-striped member-list"></table>
                                                 <p class="no-members" style="display:none"><spring:message code="no.direct.member.portlets"/></p>
                                             </div>
                                         </c:when>
@@ -150,7 +150,7 @@
                         </div>
                     </div><!--end: content row -->
                 </div>
-                <div class="fl-container-flex40 span4 col-md-4">
+                <div class="d-flex40 span4 col-md-4">
                     <!--selection-->
                     <div class="portlet-selection">
                         <!--titlebar-->
@@ -200,27 +200,27 @@
             <div class="modal-dialog">
                 <div class="modal-content">
                     <div class="modal-header">
-                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                         <h4 class="modal-title" id="myModalLabel">Create/Edit Custom Group</h4>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     </div> <!-- end .modal-header div -->
                     <div class="modal-body">
-                        <form class="form-horizontal">
-                            <div class="form-group">
-                                <label for="groupName" class="col-sm-4 control-label">Group Name</label>
+                        <form class="">
+                            <div class="row mb-3">
+                                <label for="groupName" class="col-sm-4 col-form-label">Group Name</label>
                                 <div class="col-sm-8">
                                     <input type="text" class="form-control" id="groupName" placeholder="<spring:message code="group.name.validation.placeholder"/>">
                                 </div>
                             </div>
-                            <div class="form-group">
-                                <label for="groupDesc" class="col-sm-4 control-label">Group Description</label>
+                            <div class="row mb-3">
+                                <label for="groupDesc" class="col-sm-4 col-form-label">Group Description</label>
                                 <div class="col-sm-8">
                                     <textarea class="form-control" id="groupDesc" rows="3" placeholder="Group Description" readonly="readonly"></textarea>
                                 </div>
                             </div>
                             <div class="row">
                                 <div class="col-sm-6">
-                                    <div class="panel panel-default">
-                                        <div class="panel-body">
+                                    <div class="card">
+                                        <div class="card-body">
                                             <h5>Group must <strong>INCLUDE</strong></h5>
                                             <!-- Data Include Node Tree -->
                                             <div id="${n}dataIncludes" class="demo"></div>
@@ -231,8 +231,8 @@
                                     </div>
                                 </div>
                                 <div class="col-sm-6">
-                                    <div class="panel panel-default">
-                                        <div class="panel-body">
+                                    <div class="card">
+                                        <div class="card-body">
                                             <h5>Group must <strong>EXCLUDE</strong></h5>
                                             <!-- Data Exclude Node Tree -->
                                             <div id="${n}dataExcludes" class="demo"></div>
@@ -246,8 +246,8 @@
                         </form>
                     </div> <!-- end .modal-content div -->
                     <div class="modal-footer">
-                        <button id="${n}cancelAdHocButton" type="button" class="btn btn-default" data-dismiss="modal">Close <i class="fa fa-times"></i></button>
-                        <button id="${n}saveAdHocButton" type="button" class="btn btn-primary" data-dismiss="modal">Save changes <i class="fa fa-save"></i></button>
+                        <button id="${n}cancelAdHocButton" type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close <i class="fa fa-times"></i></button>
+                        <button id="${n}saveAdHocButton" type="button" class="btn btn-primary" data-bs-dismiss="modal">Save changes <i class="fa fa-save"></i></button>
                     </div> <!-- end .modal-footer div -->
                 </div> <!-- end .modal-content div -->
             </div> <!-- end .modal-dialog div -->
@@ -259,55 +259,32 @@
     up.jQuery(function() {
         var $ = up.jQuery;
 
-        up.entityselection("#${n}chooseGroupsBody", {
-            entityRegistry: {
-                options: { entitiesUrl: '<c:url value="/api/entities"/>' }
-            },
-            entityTypes: [<c:forEach items="${selectTypes}" var="type" varStatus="status">'<spring:escapeBody htmlEscape="false" javaScriptEscape="true">${type}</spring:escapeBody>'${status.last ? '' : ','}</c:forEach>],
-            selected: [<c:forEach items="${groups}" var="group" varStatus="status">'<spring:escapeBody htmlEscape="false" javaScriptEscape="true">${group.entityType}:${group.id}</spring:escapeBody>'${ status.last ? '' : ',' }</c:forEach>],
-            initialFocusedEntity: '${rootEntity.entityType}:${rootEntity.id}',
-            enableAdHocGroups: ${not empty enableAdHocGroups ? enableAdHocGroups : false},
-            selectMultiple: ${selectionMode},
-            requireSelection: ${ not empty requireSelection ? requireSelection : true },
-            pagsApiUrl: "<c:url value='/api/v4-3/pags/'/>",
-            selectors: {
-                alerts: ".alert",
-                alertSuccess: "#${n}alertSuccess",
-                alertInvalidParent: "#${n}alertInvalidParent",
-                alertGroupExists: "#${n}alertGroupExists",
-                alertUnauthorized: "#${n}alertUnauthorized",
-                alertUnknown: "#${n}alertUnknown",
-                selectionBasket: "#${n}selectionBasket",
-                breadcrumbs: "#${n}entityBreadcrumbs",
-                currentEntityName: "#${n}currentEntityName",
-                entityBrowserContent: "#${n}entityBrowserContent",
-                closeSearch: "#${n}closeDropDown",
-                searchForm: "#${n}searchForm",
-                searchDropDown: "#${n}searchDropDown",
-                searchResults: "#${n}searchResults",
-                searchResultsNoMembers: "#${n}searchResultsNoMembers",
-                searchLoader: "#${n}searchLoader",
-                currentSelectBtn: "#${n}currentSelectBtn",
-                adHocCreate: "#${n}adHocCreate",
-                adHocGroupsModal: "#${n}chooseGroupsBody #adhocGroupModal",
-                dialogIncludesTree: '#${n}dataIncludes',
-                dataIncludesList: '#${n}dataIncludesList',
-                dialogExcludesTree: '#${n}dataExcludes',
-                dataExcludesList: '#${n}dataExcludesList',
-                saveAdHocButton: '#${n}saveAdHocButton',
-                buttonPrimary: "#${n}buttonPrimary"
-            },
-            messages: {
-                selectButtonMessage: '<spring:escapeBody htmlEscape="false" javaScriptEscape="true"><spring:message code="select"/></spring:escapeBody>',
-                deselectButtonMessage: '<spring:escapeBody htmlEscape="false" javaScriptEscape="true"><spring:message code="deselect"/></spring:escapeBody>',
-                removeCrumb: '<spring:escapeBody htmlEscape="false" javaScriptEscape="true"><spring:message code="remove"/></spring:escapeBody>',
-                removeSelection: '<spring:escapeBody htmlEscape="false" javaScriptEscape="true"><spring:message code="remove"/></spring:escapeBody>',
-                addSelection: '<spring:escapeBody htmlEscape="false" javaScriptEscape="true"><spring:message code="select"/></spring:escapeBody>',
-                selected: '<spring:escapeBody htmlEscape="false" javaScriptEscape="true"><spring:message code="selected"/></spring:escapeBody>',
-                nothingSelected: '<spring:escapeBody htmlEscape="false" javaScriptEscape="true"><spring:message code="nothing.selected"/></spring:escapeBody>',
-                searchValue: '<spring:escapeBody htmlEscape="false" javaScriptEscape="true"><spring:message code="please.enter.name"/></spring:escapeBody>'
+        // Initialize modern EntitySelector (replaces old Fluid component)
+        if (typeof ModernEntitySelector !== 'undefined') {
+            const entityBrowser = document.querySelector('#${n}entityBrowserContent');
+            if (entityBrowser && !entityBrowser._modernEntitySelector) {
+                const options = {
+                    entityTypes: [<c:forEach items="${selectTypes}" var="type" varStatus="status">'<spring:escapeBody htmlEscape="false" javaScriptEscape="true">${type}</spring:escapeBody>'${status.last ? '' : ','}</c:forEach>],
+                    selected: [<c:forEach items="${groups}" var="group" varStatus="status">'<spring:escapeBody htmlEscape="false" javaScriptEscape="true">${group.entityType}:${group.id}</spring:escapeBody>'${ status.last ? '' : ',' }</c:forEach>],
+                    initialFocusedEntity: '${rootEntity.entityType}:${rootEntity.id}',
+                    selectMultiple: true,
+                    entitiesUrl: '<c:url value="/api/entities"/>',
+                    selectors: {
+                        selectionBasket: '#${n}selectionBasket',
+                        breadcrumbs: '#${n}entityBreadcrumbs',
+                        currentEntityName: '#${n}currentEntityName',
+                        entityBrowserContent: '#${n}entityBrowserContent',
+                        searchForm: '#${n}searchForm',
+                        searchDropDown: '#${n}searchDropDown',
+                        searchResults: '#${n}searchResults',
+                        searchResultsNoMembers: '#${n}searchResultsNoMembers',
+                        currentSelectBtn: '#${n}currentSelectBtn',
+                        buttonPrimary: '#${n}buttonPrimary'
+                    }
+                };
+                new ModernEntitySelector(entityBrowser, options);
             }
-        });
+        }
 
         /*
          * Ad Hoc Groups (jsTree)
@@ -316,11 +293,11 @@
         $("#groupName").on('input', function () {
             var nameRegex = /^[\w ]{5,500}$/;
             if (nameRegex.test($(this).val())) {
-                $("#${n}saveAdHocButton").removeAttr('disabled');
-                $(this).parent().removeClass("has-error");
+                $("#${n}saveAdHocButton").prop('disabled', false);
+                $(this).parent().removeClass("is-invalid");
             } else {
                 $("#${n}saveAdHocButton").attr('disabled', 'disabled');
-                $(this).parent().addClass("has-error");
+                $(this).parent().addClass("is-invalid");
             }
         });
 
@@ -363,7 +340,7 @@
                 var list = $("#${n}dataIncludesList");
                 list.empty();
                 $.each(data.selected, function (i, name) {
-                    var li = $("<li/>").text(data.instance.get_node(name).text).appendTo(list);
+                    var li = $("<li></li>").text(data.instance.get_node(name).text).appendTo(list);
                 });
                 setGroupDescription();
             });
@@ -372,7 +349,7 @@
                 var list = $("#${n}dataExcludesList");
                 list.empty();
                 $.each(data.selected, function (i, name) {
-                    var li = $("<li/>").text(data.instance.get_node(name).text).appendTo(list);
+                    var li = $("<li></li>").text(data.instance.get_node(name).text).appendTo(list);
                 });
                 setGroupDescription();
             });
@@ -381,7 +358,7 @@
         var resetAdHocDialog = function () {
             console.log("resetting ad hoc dialog");
             $("#groupName").val("");
-            $("#groupName").parent().removeClass("has-error");
+            $("#groupName").parent().removeClass("is-invalid");
             $("#${n}saveAdHocButton").attr('disabled', 'disabled');
 
             $(":jstree").each(function () {
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/exit-fragment-administration/logout-view.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/exit-fragment-administration/logout-view.jsp
index c5dd1679095..6c99229f235 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/exit-fragment-administration/logout-view.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/exit-fragment-administration/logout-view.jsp
@@ -25,11 +25,11 @@
 </portlet:actionURL>
 <div id="portalFragAdminExit">
     <h2><spring:message code="fragment.administration"/></h2>
-    <form class="form-inline" name="fragmentAdminExitForm" action="${actionUrl}" method="POST">
-        <div class="form-group">
+    <form class="d-flex align-items-center gap-2" name="fragmentAdminExitForm" action="${actionUrl}" method="POST">
+        <div>
             <c:set var="userHtml"><i>${fn:escapeXml(remoteUser)}</i></c:set>
-            <label for="exitFragment"><spring:message code="you.are.currently.logged.in.as.for.dlm.fragment.administration" arguments="${userHtml}" htmlEscape="false"/></label>
-            <input class="btn btn-default" id="exitFragment" type="Submit" value="<spring:message code="exit"/>" name="_eventId_logout"/>
+            <label for="exitFragment" class="form-label"><spring:message code="you.are.currently.logged.in.as.for.dlm.fragment.administration" arguments="${userHtml}" htmlEscape="false"/></label>
+            <input class="btn btn-secondary" id="exitFragment" type="Submit" value="<spring:message code="exit"/>" name="_eventId_logout"/>
         </div>
     </form>
 </div>
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/forgot-password/forgotPassword.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/forgot-password/forgotPassword.jsp
index 31bd1d2defc..ca65e9b0c21 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/forgot-password/forgotPassword.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/forgot-password/forgotPassword.jsp
@@ -27,15 +27,15 @@
 <c:set var="n"><portlet:namespace/></c:set>
 
 <!-- Portlet -->
-<div class="fl-widget portlet" role="section">
+<div class="card portlet" role="section">
 
     <!-- Portlet Titlebar -->
-    <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead" data-role="header">
+    <div class="card-header titlebar portlet-titlebar" role="sectionhead" data-role="header">
         <h2 class="title" role="heading"><spring:message code="reset.my.password"/></h2>
     </div>
 
   <!-- Portlet -->
-  <div class="fl-widget-content content portlet-content" data-role="content">
+  <div class="card-body content portlet-content" data-role="content">
   
     <!-- Portlet Section -->
     <div class="portlet-section" role="region">
@@ -45,7 +45,7 @@
         <form action="${ formUrl }" method="POST">
 
             <p>
-                <label for="${n}userName"><spring:message code="username"/></label>
+                <label for="${n}userName" class="form-label"><spring:message code="username"/></label>
                 <input id="${n}userName" name="username" value="${ username }"/>
             </p>
         
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/forgot-password/sendTokenSuccess.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/forgot-password/sendTokenSuccess.jsp
index 6755a825920..adf9386e554 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/forgot-password/sendTokenSuccess.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/forgot-password/sendTokenSuccess.jsp
@@ -27,14 +27,14 @@
 <c:set var="n"><portlet:namespace/></c:set>
 
 <!-- Portlet -->
-<div class="fl-widget portlet" role="section">
+<div class="card portlet" role="section">
 
     <!-- Portlet Titlebar -->
-    <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead" data-role="header">
+    <div class="card-header titlebar portlet-titlebar" role="sectionhead" data-role="header">
         <h2 class="title" role="heading"><spring:message code="reset.email.sent"/></h2>
     </div>
 
-    <div class="fl-widget-content content portlet-content" data-role="content">
+    <div class="card-body content portlet-content" data-role="content">
 
     <!-- Portlet Section -->
     <div class="portlet-section" role="region">
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/fragment-administration/select-fragment-form.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/fragment-administration/select-fragment-form.jsp
index 00223f7b6ae..f40f5c10632 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/fragment-administration/select-fragment-form.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/fragment-administration/select-fragment-form.jsp
@@ -21,22 +21,22 @@
 <%@ include file="/WEB-INF/jsp/include.jsp" %>
 
 <!-- Portlet -->
-<div id="portalFragAdminList" class="fl-widget portlet snooper view-main" role="section">
+<div id="portalFragAdminList" class="card portlet snooper view-main" role="section">
 
 
     <!-- Portlet Titlebar -->
-    <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead">
+    <div class="card-header titlebar portlet-titlebar" role="sectionhead">
     	<h2 class="title" role="heading"><spring:message code="fragment.administration"/></h2>
     </div>
 
     <!-- Portlet Content -->
-	<div class="fl-widget-content content portlet-content">
+	<div class="card-body content portlet-content">
 
         <portlet:actionURL var="formUrl">
             <portlet:param name="execution" value="${flowExecutionKey}" />
             <portlet:param name="_eventId" value="selectFragment"/>
         </portlet:actionURL>
-        <form method="POST" name="fragmentAdminForm" class="form form-inline" action="${formUrl}">
+        <form method="POST" name="fragmentAdminForm" class="form d-flex align-items-center gap-2" action="${formUrl}">
             <select id="fragmentOwner" class="form-control" name="impersonateUser" title="<spring:message code="choose.fragment.to.edit"/>">
             	<option value="NONE"> -- <spring:message code="fragments"/> -- </option>
                 <c:forEach items="${fragments}" var="item">
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/fragment-audit/fragment-audit.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/fragment-audit/fragment-audit.jsp
index fe21c75bcf9..18106c821b5 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/fragment-audit/fragment-audit.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/fragment-audit/fragment-audit.jsp
@@ -23,9 +23,9 @@
 <c:set var="n"><portlet:namespace/></c:set>
 
 <!-- Portlet -->
-<div class="fl-widget portlet" role="section">
+<div class="card portlet" role="section">
     <!-- Portlet Body -->
-    <div class="fl-widget-content portlet-body">
+    <div class="card-body portlet-body">
 
         <!-- Portlet Section -->
         <div class="portlet-section" role="region">
@@ -42,11 +42,11 @@
     </div>
 </div>
 
-<div id="${n}template" class="fl-widget panel panel-default" style="display: none;">
-    <div class="fl-widget-titlebar panel-heading">
+<div id="${n}template" class="card card" style="display: none;">
+    <div class="card-header card-header">
         <h2><span class="name"></span></h2>
     </div>
-    <div class="fl-widget-content panel-body" style="padding: 4px;">
+    <div class="card-body card-body" style="padding: 4px;">
         <p>
             <div style="float: right;">
                 <strong><spring:message code="fragmentAudit.precedence.label"/>:</strong> <span class="precedence"></span>
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/groups-manager/selectGroupType.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/groups-manager/selectGroupType.jsp
index a05737e751b..3bcbb237cab 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/groups-manager/selectGroupType.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/groups-manager/selectGroupType.jsp
@@ -35,27 +35,27 @@
 <c:set var="n"><portlet:namespace/></c:set>
 
 <!-- Portlet -->
-<div class="fl-widget portlet grp-mgr view-selectgroup" role="section">
+<div class="card portlet grp-mgr view-selectgroup" role="section">
     
     <!-- Portlet Titlebar -->
-    <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead">
+    <div class="card-header titlebar portlet-titlebar" role="sectionhead">
         <h2 class="title" role="heading">
             <spring:message code="groups.by.type" />
         </h2>
     </div> <!-- end: portlet-titlebar -->
     
     <!-- Portlet Content -->
-    <div class="fl-widget-content content portlet-content">
+    <div class="card-body content portlet-content">
     
-    	<div class="panel-list icon-large group-types">
-        	<div class="panel type-categories">
-            	<div class="titlebar">
-                	<h2 class="title">
+    	<div class="card-list icon-large group-types">
+        	<div class="card type-categories">
+            	<div class="card-header titlebar">
+                	<h2 class="card-title title">
                     	<a href="${ portletUrl }"class="btn btn-primary"><i class="fa fa-puzzle-piece"></i> <spring:message code="portlet.categories"/></a>
                     </h2>
                     <h3 class="subtitle"><spring:message code="portlet.categories.description"/></h3>
                 </div>
-                <div class="content">
+                <div class="card-body content">
                 	<span class="link-list">
                     	<c:forEach items="${ groups.categories }">
                         	<a href="${ groupUrl }">${ fn:escapeXml(group.name )}</a>${ fn:escapeXml(status.last ? "" : ", " )}
@@ -63,14 +63,14 @@
                     </span>
                 </div>
             </div>
-            <div class="panel type-people">
-            	<div class="titlebar">
-                	<h2 class="title">
+            <div class="card type-people">
+            	<div class="card-header titlebar">
+                	<h2 class="card-title title">
                     	<a href="${ peopleUrl }"class="btn btn-primary"><i class="fa fa-users"></i> <spring:message code="person.groups"/></a>
                     </h2>
                     <h3 class="subtitle"><spring:message code="person.groups.description"/></h3>
                 </div>
-                <div class="content">
+                <div class="card-body content">
                 	<span class="link-list">
                     	<c:forEach items="${ groups.people }">
                         	<a href="${ groupUrl }">${ fn:escapeXml(group.name )}</a>${ fn:escapeXml(status.last ? "" : ", " )}
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/local-login/loginForm.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/local-login/loginForm.jsp
index 42efe793210..7b5b3752fc6 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/local-login/loginForm.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/local-login/loginForm.jsp
@@ -30,10 +30,10 @@
 </portlet:renderURL>
 
 <!-- Portlet -->
-<div class="fl-widget portlet portlet-content" role="section" data-role="content">
+<div class="card portlet portlet-content" role="section" data-role="content">
 
   <!-- Portlet Body -->
-  <div class="fl-widget-content portlet-body">
+  <div class="card-body portlet-body">
 
     <!-- Portlet Section -->
     <div id="${n}search" class="portlet-section" role="region">
@@ -54,23 +54,23 @@
             </div>
         </c:if>
 
-        <form class="form-horizontal" role="form" action="${ loginUrl }" method="POST">
-          <div class="form-group">
-            <label class="control-label col-sm-4" for="${n}userName"><spring:message code="username"/></label>
+        <form class="" role="form" action="${ loginUrl }" method="POST">
+          <div class="row mb-3">
+            <label class="col-form-label col-sm-4" for="${n}userName"><spring:message code="username"/></label>
             <div class="col-sm-8">
               <input class="xform-control" type="text" id="${n}userName" name="userName" value="${ attemptedUsername }"/>
             </div>
            </div>
 
-          <div class="form-group">
-            <label class="control-label col-sm-4" for="${n}password"><spring:message code="password"/></label>
+          <div class="row mb-3">
+            <label class="col-form-label col-sm-4" for="${n}password"><spring:message code="password"/></label>
             <div class="col-sm-8">
               <input class="xform-control" type="password" id="${n}password" name="password"/>
             </div>
           </div>
 
-          <div class="form-group">
-            <label class="control-label col-sm-4" for="${n}profile"><spring:message code="profile"/></label>
+          <div class="row mb-3">
+            <label class="col-form-label col-sm-4" for="${n}profile"><spring:message code="profile"/></label>
             <div class="col-sm-8">
               <select class="xform-control" id="${n}profile" name="profile">
                 <option value="desktop" ${ profile == 'desktop' ? 'selected=selected' : '' }>Desktop</option>
@@ -80,14 +80,14 @@
             </div>
           </div>
 
-          <div class="buttons utilities form-group">
-              <div class="col-sm-offset-4 col-sm-8">
+          <div class="buttons utilities row mb-3">
+              <div class="offset-sm-4 col-sm-8">
                 <input type="submit" value="<spring:message code="login"/>" class="primary button btn"/>
               </div>
           </div>
 
-          <div class="form-group">
-            <div class="col-sm-offset-4 col-sm-8">
+          <div class="row">
+            <div class="offset-sm-4 col-sm-8">
               <a href="${ forgotPasswordUrl }"><spring:message code="forgot.your.username.or.password"/></a>
             </div>
           </div>
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/locale-selector/selectLocale.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/locale-selector/selectLocale.jsp
index 50509f5e939..e89af0fb8f2 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/locale-selector/selectLocale.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/locale-selector/selectLocale.jsp
@@ -24,15 +24,15 @@
 </portlet:actionURL>
 
 <!-- Portlet -->
-<div class="fl-widget portlet loc-sel view-select" role="section">
+<div class="card portlet loc-sel view-select" role="section">
 
     <!-- Portlet Titlebar -->
-    <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead">
+    <div class="card-header titlebar portlet-titlebar" role="sectionhead">
     	 <h2 class="title" role="heading"><spring:message code="set.language.preference"/></h2>
     </div>
 
     <!-- Portlet Content -->
-    <div class="fl-widget-content content portlet-content">
+    <div class="card-body content portlet-content">
       	<div class="portlet-form">
               <form action="${queryUrl}" method="POST">
                   <ul style="margin:0">
@@ -40,7 +40,7 @@
                           <li style="list-style:none;padding:0.2em 0 0.2em 0">
                               <input type="radio" name="locale" id="${ fn:escapeXml(locale.code) }" value="${ fn:escapeXml(locale.code) }" ${ locale.code == currentLocale ? "checked" : '' }/>
                               <img src="/ResourceServingWebapp/rs/famfamfam/flags/${ fn:escapeXml(fn:toLowerCase(locale.locale.country) )}.png"/>
-                              <label for="${ fn:escapeXml(locale.code) }">
+                              <label for="${ fn:escapeXml(locale.code) }" class="form-check-label">
                                   ${ fn:escapeXml(locale.displayLanguage) }
                               </label>
                           </li>
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/permissions-administration/deletePermission.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/permissions-administration/deletePermission.jsp
index a5eccfb5f5b..561bb566cda 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/permissions-administration/deletePermission.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/permissions-administration/deletePermission.jsp
@@ -39,16 +39,16 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
 | the user interface of this portlet
 | including HTML, CSS, JavaScript, accessibilty,
 | naming conventions, 3rd Party libraries
-| (like jQuery and the Fluid Skinning System)
+| (like jQuery and Bootstrap)
 | and more, refer to:
 | docs/SKINNING_UPORTAL.md
 -->
 
 <!-- Portlet -->
-<div class="fl-widget portlet ptl-mgr view-confirmremove" role="section">
+<div class="card portlet ptl-mgr view-confirmremove" role="section">
 
   <!-- Portlet Title -->
-  <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead">
+  <div class="card-header titlebar portlet-titlebar" role="sectionhead">
 
     <div class="breadcrumb">
         <c:forEach items="${ breadcrumbs }" var="breadcrumb" varStatus="status">
@@ -69,7 +69,7 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
   </div> <!-- end: portlet-titlebar -->
 
   <!-- Portlet Content -->
-  <div class="fl-widget-content content portlet-content">
+  <div class="card-body content portlet-content">
 
     <!-- Portlet Section -->
     <div class="portlet-section" role="region">
@@ -80,8 +80,8 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
     </div> <!-- end: portlet-section -->
 
     <div class="buttons">
-      <a href="${removeUrl}" class="button btn btn-default" name="_eventId_remove" id="${n}deletePermissionButton"><spring:message code="remove"/></a>
-      <a href="${cancelUrl}" class="button btn btn-default"><spring:message code="cancel"/></a>
+      <a href="${removeUrl}" class="button btn btn-secondary" name="_eventId_remove" id="${n}deletePermissionButton"><spring:message code="remove"/></a>
+      <a href="${cancelUrl}" class="button btn btn-secondary"><spring:message code="cancel"/></a>
     </div>
 
 
@@ -93,8 +93,8 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
 up.jQuery(function() {
     var $ = up.jQuery;
 
-    $(document).ready(function(){
-        $('#${n}deletePermissionButton').click(function(e){
+    $(function(){
+        $('#${n}deletePermissionButton').on('click', function(e){
             e.preventDefault();
             $.ajax({
                 url: "<c:url value="/api/deletePermission"/>",
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/permissions-administration/listActivities.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/permissions-administration/listActivities.jsp
index 08cd5cfe628..d36d9c30208 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/permissions-administration/listActivities.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/permissions-administration/listActivities.jsp
@@ -32,19 +32,19 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
 | the user interface of this portlet
 | including HTML, CSS, JavaScript, accessibilty,
 | naming conventions, 3rd Party libraries
-| (like jQuery and the Fluid Skinning System)
+| (like jQuery and Bootstrap)
 | and more, refer to:
 | docs/SKINNING_UPORTAL.md
 -->
 
 <!-- Portlet -->
-<div class="fl-widget portlet prm-mgr view-listperms" role="section">
+<div class="card portlet prm-mgr view-listperms" role="section">
 
 
   <!-- Portlet Titlebar -->
-	<div role="sectionhead" class="fl-widget-titlebar titlebar portlet-titlebar">
+	<div role="sectionhead" class="card-header titlebar portlet-titlebar">
 	  	<div class="breadcrumb">
-	    	<span class="breadcrumb-1"><a href="${ backUrl }"><spring:message code="categories"/></a></span>
+	    	<span class="breadcrumb-item breadcrumb-1"><a href="${ backUrl }"><spring:message code="categories"/></a></span>
 	        <span class="separator">&gt; </span>
 	    </div>
 	    <h2 class="title" role="heading"><spring:message code="permissions.in"/> <span class="name">${ fn:escapeXml(owner.name )}</span></h2>
@@ -53,7 +53,7 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
 
 
   <!-- Portlet Content -->
-  <div class="fl-widget-content portlet-content">
+  <div class="card-body portlet-content">
 
     <!-- Portlet Section -->
 
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/permissions-administration/listOwners.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/permissions-administration/listOwners.jsp
index 14df9022804..47483e9d3ac 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/permissions-administration/listOwners.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/permissions-administration/listOwners.jsp
@@ -33,32 +33,32 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
 | the user interface of this portlet
 | including HTML, CSS, JavaScript, accessibilty,
 | naming conventions, 3rd Party libraries
-| (like jQuery and the Fluid Skinning System)
+| (like jQuery and Bootstrap)
 | and more, refer to:
 | docs/SKINNING_UPORTAL.md
 -->
 
 <!-- Portlet -->
-<div class="fl-widget portlet prm-mgr view-listperms container-fluid" role="section">
+<div class="card portlet prm-mgr view-listperms container-fluid" role="section">
 
   <!-- Portlet Titlebar -->
-  <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead">
+  <div class="card-header titlebar portlet-titlebar" role="sectionhead">
       <h2 role="heading" class="title"><spring:message code="permissions.by.category"/></h2>
   </div>
   <!-- end: portlet-titlebar -->
 
   <!-- Portlet Content -->
-  <div class="fl-widget-content portlet-content row">
+  <div class="card-body portlet-content row">
 
     <div class="permission-lookup">
-        <form id="${n}permissionLookupForm" class="form-inline" action="${permissionLookupUrl}" method="POST">
-            <div id="${n}principalSuggest" class="principal-input form-group">
-                <label for="${n}principalSuggest">
+        <form id="${n}permissionLookupForm" class="d-flex flex-wrap align-items-center gap-3" action="${permissionLookupUrl}" method="POST">
+            <div id="${n}principalSuggest" class="principal-input">
+                <label for="${n}principalSuggest" class="form-label">
                   <spring:message code="permission.suggest.principal"/>
                 </label>
                 <input class="up-autocomplete-searchterm form-control" type="text" name="principalDisplayName" value="<spring:message code="permission.suggest.principal.value"/>" aria-labelledby="<spring:message code="permission.suggest.principal.label"/>" autocomplete="off"/>
                 <input class="form-control" type="hidden" name="principal"/>
-                <label for="${n}permissionSuggest">
+                <label for="${n}permissionSuggest" class="form-label">
                   <spring:message code="permission.suggest.permission"/>
                 </label>
                 <div class="up-autocomplete-dropdown">
@@ -76,7 +76,7 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
                     <div class="up-autocomplete-close"><a href="#"><spring:message code="close"/></a></div>
                 </div>
             </div>
-            <div id="${n}permissionSuggest" class="activity-input form-group">
+            <div id="${n}permissionSuggest" class="activity-input">
                 <input class="up-autocomplete-searchterm form-control" type="text" name="activityDisplayName" value="<spring:message code="permission.suggest.permission.value"/>" aria-labelledby="<spring:message code="permission.suggest.permission.label"/>" autocomplete="off"/>
                 <input type="hidden" name="activity"/>
                 <span class="punctuation">?</span>
@@ -100,18 +100,18 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
         <span class="permission-lookup-error-container" style="font-size: 13px; color: #dd7615;"></span>
     </div>
 
-  	<!-- Panel list -->
-    <div class="fl-col-flex2 panel-list icon-large">
+  	<!-- Card list -->
+    <div class="fl-col-flex2 card-list icon-large">
 
         <!-- 2 column layout -->
-        <div class="fl-col fl-force-left">
+        <div class="fl-col float-start">
             <c:set var="numOwners" value="${ fn:length(owners) }" />
             <c:set var="split" value="${ numOwners / 2 }" />
             <c:forEach items="${ owners }" var="owner" varStatus="ownerStatus">
-            	<!-- Panel -->
-                <div class="permission-owner ${ fn:escapeXml(owner.fname )} panel">
-                	<div class="titlebar">
-                        <h2 class="title">
+            	<!-- Card -->
+                <div class="permission-owner ${ fn:escapeXml(owner.fname )} card">
+                	<div class="card-header titlebar">
+                        <h2 class="card-title title">
                             <portlet:renderURL var="ownerUrl">
                                 <portlet:param name="execution" value="${flowExecutionKey}" />
                                 <portlet:param name="_eventId" value="listActivities"/>
@@ -121,7 +121,7 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
                         </h2>
                         <h3 class="subtitle">${ fn:escapeXml(owner.description )}</h3>
                     </div>
-                    <div class="content">
+                    <div class="card-body content">
                         <span class="link-list">
                             <c:forEach items="${ owner.activities }" var="activity" varStatus="status">
                                 <portlet:renderURL var="activityUrl">
@@ -134,7 +134,7 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
                             </c:forEach>
                         </span>
                     </div>
-                </div> <!-- end: panel -->
+                </div> <!-- end: card -->
                 <c:if test="${ split <= ownerStatus.index+1 and ownerStatus.index+1 < split+1 }">
                     </div>
                     <!-- Second column -->
@@ -145,7 +145,7 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
 
             </div>
 
-        </div> <!-- end: panel list -->
+        </div> <!-- end: card list -->
 
   </div> <!-- end: portlet-content -->
 
@@ -155,7 +155,7 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
 up.jQuery(function() {
     var $ = up.jQuery;
 
-    $(document).ready(function(){
+    $(function(){
 
         var submitForm = function(form){
             if (!principalSuggest.getValue() || !permissionSuggest.getValue()) {
@@ -167,8 +167,8 @@ up.jQuery(function() {
             return true;
         };
 
-        var principalSuggest = up.Autocomplete(
-            "#${n}principalSuggest",
+        var principalSuggest = new ModernAutocomplete(
+            document.querySelector("#${n}principalSuggest"),
             {
                 initialText: "John",
                 searchFunction: function(searchterm) {
@@ -194,8 +194,8 @@ up.jQuery(function() {
             }
         );
 
-        var permissionSuggest = up.Autocomplete(
-            "#${n}permissionSuggest",
+        var permissionSuggest = new ModernAutocomplete(
+            document.querySelector("#${n}permissionSuggest"),
             {
                 initialText: '<spring:message code="permission" htmlEscape="false" javaScriptEscape="true"/>',
                 searchFunction: function(searchterm) {
@@ -215,7 +215,7 @@ up.jQuery(function() {
             }
         );
 
-        $("#${n}permissionLookupForm").submit(function () {
+        $("#${n}permissionLookupForm").on('submit', function () {
             var form, errorContainer;
             form = this;
             errorContainer = $(form).find(".permission-lookup-error-container");
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/permissions-administration/permissionLookupResult.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/permissions-administration/permissionLookupResult.jsp
index b12e6fd95fb..5acbe2b81c5 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/permissions-administration/permissionLookupResult.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/permissions-administration/permissionLookupResult.jsp
@@ -92,23 +92,23 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
 | the user interface of this portlet
 | including HTML, CSS, JavaScript, accessibilty,
 | naming conventions, 3rd Party libraries
-| (like jQuery and the Fluid Skinning System)
+| (like jQuery and Bootstrap)
 | and more, refer to:
 | docs/SKINNING_UPORTAL.md
 -->
 
 <!-- Portlet -->
-<div id="${n}permissionBrowser" class="fl-widget portlet prm-mgr" role="section">
+<div id="${n}permissionBrowser" class="card portlet prm-mgr" role="section">
 
   <!-- Portlet Titlebar -->
-  <div class="fl-widget-titlebar portlet-titlebar" role="sectionhead">
+  <div class="card-header portlet-titlebar" role="sectionhead">
     <h2 class="title" role="heading">
         <spring:message code="activityName.permissions.assigned.to.principalName" arguments="${ fn:escapeXml(activityDisplayName) }, ${ principalDisplayName }"/>
     </h2>
   </div> <!-- end: portlet-titlebar -->
 
   <!-- Portlet Content -->
-  <div class="fl-widget-content portlet-content">
+  <div class="card-body portlet-content">
       <div class="titlebar">
           <h3 class="title" role="heading"><spring:message code="assignments"/></h3>
       </div>
@@ -228,11 +228,13 @@ up.jQuery(function() {
                 $('td:eq(1)', nRow).html( getActivityValue(aData.activityName, aData.inherited) );
             },
             // Setting the top and bottom controls
-            sDom: 'r<"row alert alert-info view-filter"<"toolbar-filter"><W><"toolbar-br"><"dataTables-inline dataTables-left"p><"dataTables-inline dataTables-left"i><"dataTables-inline dataTables-left"l>><"row"<"span12"t>>>',
-            // Filtering
-            oColumnFilterWidgets: {
-                sSeparator: ',', // Used for multivalue column Categories
-                aiExclude: [principalList_configuration.column.placeHolderForEditLink]
+            sDom: 'r<"row alert alert-info view-filter"<"toolbar-filter"><P><"toolbar-br"><"dataTables-inline dataTables-left"p><"dataTables-inline dataTables-left"i><"dataTables-inline dataTables-left"l>><"row"<"span12"t>>>',
+            // SearchPanes configuration (modern replacement for ColumnFilterWidgets)
+            searchPanes: {
+                columns: [0, 1, 2], // Owner, Activity, and Target columns
+                cascadePanes: true,
+                viewTotal: true,
+                layout: 'columns-3'
             }
         });
     };
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/permissions-administration/selectTarget.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/permissions-administration/selectTarget.jsp
index 9e4cf806b50..4ec06cf2553 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/permissions-administration/selectTarget.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/permissions-administration/selectTarget.jsp
@@ -43,22 +43,22 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
 | the user interface of this portlet
 | including HTML, CSS, JavaScript, accessibilty,
 | naming conventions, 3rd Party libraries
-| (like jQuery and the Fluid Skinning System)
+| (like jQuery and Bootstrap)
 | and more, refer to:
 | docs/SKINNING_UPORTAL.md
 -->
 
 <!-- Portlet -->
-<div class="fl-widget portlet prm-mgr" role="section">
+<div class="card portlet prm-mgr" role="section">
 
 <!-- Portlet Titlebar -->
-	<div role="sectionhead" class="fl-widget-titlebar titlebar portlet-titlebar">
+	<div role="sectionhead" class="card-header titlebar portlet-titlebar">
     	<div class="breadcrumb">
-        	<span class="breadcrumb-1"><a href="${ ownersUrl }"><spring:message code="categories"/></a></span>
+        	<span class="breadcrumb-item breadcrumb-1"><a href="${ ownersUrl }"><spring:message code="categories"/></a></span>
             <span class="separator">&gt; </span>
-            <span class="breadcrumb-2"><a href="${ activitiesUrl }">${ fn:escapeXml(owner.name )}</a></span>
+            <span class="breadcrumb-item breadcrumb-2"><a href="${ activitiesUrl }">${ fn:escapeXml(owner.name )}</a></span>
             <span class="separator">&gt; </span>
-            <span class="breadcrumb-3"><a href="${ permissionsUrl }">${ fn:escapeXml(activity.name )}</a></span>
+            <span class="breadcrumb-item breadcrumb-3"><a href="${ permissionsUrl }">${ fn:escapeXml(activity.name )}</a></span>
             <span class="separator">&gt; </span>
         </div>
         <h2 class="title" role="heading"><spring:message code="add.assignment.to"/> <span class="name">${ fn:escapeXml(activity.name )}</span></h2>
@@ -68,12 +68,12 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
 
 
   <!-- Portlet Content -->
-  <div class="fl-widget-content portlet-content">
+  <div class="card-body portlet-content">
 
     <!-- Portlet Section -->
     <div class="portlet-form">
         <form id="${n}targetForm" action="${ formUrl }" method="POST">
-            <label for="${n}targetSuggest"><spring:message code="select.target.instruction"/>:</label>
+            <label for="${n}targetSuggest" class="form-label"><spring:message code="select.target.instruction"/>:</label>
             <div id="${n}targetSuggest" class="target-input">
                 <input class="up-autocomplete-searchterm" type="text" name="targetDisplayName" value="<spring:message code="target"/>" autocomplete="off"/>
                 <input type="hidden" name="target"/>
@@ -116,8 +116,8 @@ up.jQuery(function() {
         form.target.value = targetSuggest.getValue();
     };
 
-    var targetSuggest = up.Autocomplete(
-            "#${n}targetSuggest",
+    var targetSuggest = new ModernAutocomplete(
+            document.querySelector("#${n}targetSuggest"),
             {
                 initialText: '<spring:message code="target" htmlEscape="false" javaScriptEscape="true"/>',
                 searchFunction: function(searchterm) {
@@ -137,10 +137,10 @@ up.jQuery(function() {
             }
         );
 
-    $(document).ready(function(){
+    $(function(){
 
 
-        $("#${n}targetForm").submit(submitForm);
+        $("#${n}targetForm").on('submit', submitForm);
     });
 
 });
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/permissions-administration/showActivity.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/permissions-administration/showActivity.jsp
index 9459583bd40..65879330dba 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/permissions-administration/showActivity.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/permissions-administration/showActivity.jsp
@@ -111,20 +111,20 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
 | the user interface of this portlet
 | including HTML, CSS, JavaScript, accessibilty,
 | naming conventions, 3rd Party libraries
-| (like jQuery and the Fluid Skinning System)
+| (like jQuery and Bootstrap)
 | and more, refer to:
 | docs/SKINNING_UPORTAL.md
 -->
 
 <!-- Portlet -->
-<div id="${n}activityBrowser" class="fl-widget portlet prm-mgr" role="section">
+<div id="${n}activityBrowser" class="card portlet prm-mgr" role="section">
 
   <!-- Portlet Titlebar -->
-    <div role="sectionhead" class="fl-widget-titlebar titlebar portlet-titlebar">
+    <div role="sectionhead" class="card-header titlebar portlet-titlebar">
         <div class="breadcrumb">
-            <span class="breadcrumb-1"><a href="${ ownersUrl }"><spring:message code="categories"/></a></span>
+            <span class="breadcrumb-item breadcrumb-1"><a href="${ ownersUrl }"><spring:message code="categories"/></a></span>
             <span class="separator">&gt; </span>
-            <span class="breadcrumb-2"><a href="${ activitiesUrl }">${ fn:escapeXml(owner.name )}</a></span>
+            <span class="breadcrumb-item breadcrumb-2"><a href="${ activitiesUrl }">${ fn:escapeXml(owner.name )}</a></span>
             <span class="separator">&gt; </span>
 
         </div>
@@ -138,7 +138,7 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
     </div>
 
   <!-- Portlet Content -->
-  <div class="fl-widget-content portlet-content">
+  <div class="card-body portlet-content">
 
     <!-- Portlet Section -->
     <div id="${n}permissionAddingTabs" class="portlet-section" role="region">
@@ -271,12 +271,13 @@ up.jQuery(function() {
 
             },
             // Setting the top and bottom controls
-            sDom: 'r<"row alert alert-info view-filter"<"toolbar-filter"><W><"toolbar-br"><"dataTables-inline dataTables-left"p><"dataTables-inline dataTables-left"i><"dataTables-inline dataTables-left"l>><"row"<"span12"t>>>',
-            // Filtering
-            oColumnFilterWidgets: {
-                sSeparator: ',', // Used for multivalue column Categories
-                aiExclude: [activityList_configuration.column.placeHolderForEditLink,
-                            activityList_configuration.column.placeHolderForDeleteLink]
+            sDom: 'r<"row alert alert-info view-filter"<"toolbar-filter"><P><"toolbar-br"><"dataTables-inline dataTables-left"p><"dataTables-inline dataTables-left"i><"dataTables-inline dataTables-left"l>><"row"<"span12"t>>>',
+            // SearchPanes configuration (modern replacement for ColumnFilterWidgets)
+            searchPanes: {
+                columns: [0, 1, 2], // Principal, Target, and Grant/Deny columns
+                cascadePanes: true,
+                viewTotal: true,
+                layout: 'columns-3'
             }
         });
     };
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/person-lookup/personLookup.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/person-lookup/personLookup.jsp
index 1f727e078b9..37144fd61c2 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/person-lookup/personLookup.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/person-lookup/personLookup.jsp
@@ -40,6 +40,10 @@
 #${n}personBrowser .dataTables-inline, #${n}personBrowser .column-filter-widgets {
     display: inline-block;
 }
+#${n}personBrowser .view-filter {
+    padding-bottom: 15px;
+    overflow: hidden;
+}
 #${n}personBrowser .dataTables_wrapper {
     width: 100%;
 }
@@ -81,51 +85,84 @@
 #${n}personBrowser .dataTables_length label {
     font-weight: normal;
 }
+#${n}personBrowser .dataTables_length select {
+    display: inline-block !important;
+    width: auto;
+    margin: 0 5px;
+}
 #${n}personBrowser .datatable-search-view {
     text-align:right;
 }
+
+/* Fix form layout to match release version */
+#${n}searchForm {
+    margin-bottom: 0;
+}
+#${n}searchForm .row {
+    margin: 0;
+    align-items: end;
+}
+#${n}searchForm .col-md-6 {
+    padding-left: 0;
+    padding-right: 15px;
+}
+#${n}searchForm .buttons {
+    margin-top: 0;
+}
+/* Fix form control heights to match */
+#${n}searchForm .form-select,
+#${n}searchForm .form-control {
+    height: 34px !important;
+    padding: 6px 12px !important;
+    font-size: 14px !important;
+    line-height: 20px !important;
+    box-sizing: border-box !important;
+}
+#${n}searchForm .form-select {
+    padding-right: 30px !important; /* Space for caret */
+}
 </style>
 
 <!-- Portlet -->
-<div id="${n}personBrowser" class="fl-widget portlet prs-lkp view-lookup" role="section">
+<div id="${n}personBrowser" class="card portlet prs-lkp view-lookup" role="section">
 
     <!-- Portlet Titlebar -->
-    <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead">
+    <div class="card-header titlebar portlet-titlebar" role="sectionhead">
         <h2 class="title" role="heading">
             <spring:message code="search.for.users" />
         </h2>
     </div>
 
     <!-- Portlet Content -->
-    <div class="fl-widget-content content portlet-content">
+    <div class="card-body content portlet-content">
 
         <div class="portlet-content">
             <form id="${n}searchForm" action="javascript:;" class="clearfix">
-                <div class="col-md-6">
-                    <select id="${n}queryAttribute" class="form-control" name="queryAttribute" aria-label="<spring:message code="type"/>">
-                        <option value="">
-                            <spring:message code="default.directory.attributes"/>
-                        </option>
-                        <c:forEach var="queryAttribute" items="${queryAttributes}">
-                            <option value="${ queryAttribute }">
-                                <spring:message code="attribute.displayName.${queryAttribute}" text="${queryAttribute}"/>
+                <div class="row g-2">
+                    <div class="col-md-6">
+                        <select id="${n}queryAttribute" class="form-select" name="queryAttribute" aria-label="<spring:message code="type"/>">
+                            <option value="">
+                                <spring:message code="default.directory.attributes"/>
                             </option>
-                        </c:forEach>
-                    </select>
-                </div>
-                <div class="col-md-6">
-                    <input id="${n}queryValue" aria-label="<spring:message code="search.terms"/>" class="form-control" type="search" name="queryValue"/>
-                </div>
-
-                <div class="col-md-6">
-                    <!-- Buttons -->
-                    <div class="buttons">
-                        <spring:message var="searchButtonText" code="search" />
-                        <input class="button btn btn-primary" type="submit" value="${searchButtonText}" />
-
-                        <a class="button btn btn-default" href="${ cancelUrl }">
-                            <spring:message code="cancel" />
-                        </a>
+                            <c:forEach var="queryAttribute" items="${queryAttributes}">
+                                <option value="${ queryAttribute }">
+                                    <spring:message code="attribute.displayName.${queryAttribute}" text="${queryAttribute}"/>
+                                </option>
+                            </c:forEach>
+                        </select>
+                    </div>
+                    <div class="col-md-6">
+                        <input id="${n}queryValue" aria-label="<spring:message code="search.terms"/>" class="form-control" type="search" name="queryValue"/>
+                    </div>
+                    <div class="col-md-6">
+                        <!-- Buttons -->
+                        <div class="buttons">
+                            <spring:message var="searchButtonText" code="search" />
+                            <input class="button btn btn-primary" type="submit" value="${searchButtonText}" />
+                            <a class="button btn btn-secondary" href="${ cancelUrl }">
+                                <spring:message code="cancel" />
+                            </a>
+                        </div>
                     </div>
                 </div>
             </form>
@@ -148,96 +185,151 @@
     </div>
 
     <script type="text/javascript">
+    // Move variables to global scope for debugging
+    var attrs = ${up:json(queryAttributes)};
+    var personList_configuration = {
+        column: {
+            name: 0,
+            username: 1
+        },
+        main: {
+            table : null,
+            pageSize: 10
+        }
+    };
+    
     up.jQuery(function() {
         var $ = up.jQuery;
+        
+        // Debug namespace
+        console.log('Namespace: "${n}"');
+        console.log('Form selector: "#${n}searchForm"');
+        console.log('Form exists:', $("#${n}searchForm").length > 0);
 
-        var attrs = ${up:json(queryAttributes)};
-        var personList_configuration = {
-            column: {
-                name: 0,
-                username: 1
-            },
-            main: {
-                table : null,
-                pageSize: 10
-            }
-        };
         // Url generating helper functions
         var getSelectPersonAnchorTag = function(displayName, userName) {
             var url = '${selectPersonUrl}'.replace("USERNAME", userName);
             return '<a href="' + url + '">' + displayName + '</a>';
         };
         var showSearchResults = function (queryData) {
-            personList_configuration.main.table = $("#${n}resultsTable").dataTable({
-                iDisplayLength: personList_configuration.main.pageSize,
-                aLengthMenu: [5, 10, 20, 50],
-                bServerSide: false,
-                sAjaxSource: '<c:url value="/api/people.json"/>',
-                sAjaxDataProp: "people",
-                bDeferRender: false,
-                bProcessing: true,
-                bAutoWidth:false,
-                sPaginationType: 'full_numbers',
-                oLanguage: {
-                    sLengthMenu: '<spring:message code="datatables.length-menu.message" htmlEscape="false" javaScriptEscape="true"/>',
-                    oPaginate: {
-                        sPrevious: '<spring:message code="datatables.paginate.previous" htmlEscape="false" javaScriptEscape="true"/>',
-                        sNext: '<spring:message code="datatables.paginate.next" htmlEscape="false" javaScriptEscape="true"/>'
+            personList_configuration.main.table = $("#${n}resultsTable").DataTable({
+                pageLength: personList_configuration.main.pageSize,
+                lengthMenu: [5, 10, 20, 50],
+                serverSide: false,
+                ajax: {
+                    url: '<c:url value="/api/people.json"/>',
+                    data: queryData,
+                    dataSrc: "people",
+                    error: function (xhr, error, thrown) {
+                        console.error('AJAX Error:', xhr.status, xhr.responseText, error, thrown);
+                    }
+                },
+                deferRender: false,
+                processing: true,
+                autoWidth: false,
+                pagingType: 'full_numbers',
+                language: {
+                    lengthMenu: '_MENU_ per page',
+                    paginate: {
+                        previous: '<spring:message code="datatables.paginate.previous" htmlEscape="false" javaScriptEscape="true"/>',
+                        next: '<spring:message code="datatables.paginate.next" htmlEscape="false" javaScriptEscape="true"/>'
                     }
                 },
-                aoColumns: [
-                    { mData: 'attributes.displayName', sType: 'string', sWidth: '50%' },  // Name
-                    { mData: 'attributes.username', sType: 'string', sWidth: '50%' }  // User Name
+                columns: [
+                    { data: 'attributes.displayName', type: 'string', width: '50%' },
+                    { data: 'attributes.username', type: 'string', width: '50%' }
                 ],
-                fnInitComplete: function (oSettings) {
-                    personList_configuration.main.table.fnDraw();
+                initComplete: function (settings) {
+                    this.api().draw();
                 },
-                fnServerData: function (sUrl, aoData, fnCallback, oSettings) {
-                    oSettings.jqXHR = $.ajax({
-                        url: sUrl,
-                        data: queryData,
-                        dataType: "json",
-                        cache: false,
-                        type: oSettings.sServerMethod,
-                        success: function (json) {
-                            if (json.sError) {
-                                oSettings.oApi._fnLog(oSettings, 0, json.sError);
-                            }
-
-                            $(oSettings.oInstance).trigger('xhr', [oSettings, json]);
-                            fnCallback(json);
-                        },
-                        error: function (xhr, error, thrown) {
-                            lib.handleError(xhr, error, thrown);
-                        }
-                    });
+                rowCallback: function (row, data, displayNum, displayIndex, dataIndex) {
+                    $('td:eq(0)', row).html( getSelectPersonAnchorTag(data.attributes.displayName, data.attributes.username) );
+                    $('td:eq(1)', row).html( getSelectPersonAnchorTag(data.attributes.username, data.attributes.username) );
                 },
-                fnInfoCallback: function( oSettings, iStart, iEnd, iMax, iTotal, sPre ) {
+                infoCallback: function( settings, start, end, max, total, pre ) {
                     var infoMessage = '<spring:message code="datatables.info.message" htmlEscape="false" javaScriptEscape="true"/>';
-                    var iCurrentPage = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1;
-                    infoMessage = infoMessage.replace(/_START_/g, iStart).
-                                        replace(/_END_/g, iEnd).
-                                        replace(/_TOTAL_/g, iTotal).
-                                        replace(/_CURRENT_PAGE_/g, iCurrentPage);
+                    var currentPage = Math.ceil(settings._iDisplayStart / settings._iDisplayLength) + 1;
+                    infoMessage = infoMessage.replace(/_START_/g, start)
+                                        .replace(/_END_/g, end)
+                                        .replace(/_TOTAL_/g, total)
+                                        .replace(/_CURRENT_PAGE_/g, currentPage);
                     return infoMessage;
                 },
-                // Add links to the proper columns after we get the data
-                fnRowCallback: function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
-                    // Create links to user
-                    $('td:eq(0)', nRow).html( getSelectPersonAnchorTag(aData.attributes.displayName, aData.attributes.username) );
-                    $('td:eq(1)', nRow).html( getSelectPersonAnchorTag(aData.attributes.username, aData.attributes.username) );
+                drawCallback: function() {
+                    // Convert pagination to match release version structure
+                    var $paginate = $('.dataTables_paginate');
+                    var $ul = $paginate.find('ul');
+                    if ($ul.length) {
+                        $ul.find('.paginate_button').each(function() {
+                            var $li = $(this);
+                            var $link = $li.find('a');
+                            if ($link.length) {
+                                var newClass = $li.attr('class').replace('page-item', 'paginate_button').replace(/\bpage-link\b/g, '');
+                                $link.attr('class', newClass);
+                                $paginate.append($link);
+                            }
+                        });
+                        $ul.remove();
+                    }
+                    
+                    // Populate column filters
+                    var table = this.api();
+                    $('.column-filter-widgets').empty();
+                    
+                    var nameSelect = $('<select><option value="">Name</option></select>');
+                    table.column(0).data().unique().sort().each(function(d) {
+                        var displayName = Array.isArray(d) ? d[0] : d;
+                        nameSelect.append('<option value="' + displayName + '">' + displayName + '</option>');
+                    });
+                    nameSelect.on('change', function() {
+                        table.column(0).search(this.value).draw();
+                    });
+                    
+                    var usernameSelect = $('<select><option value="">Username</option></select>');
+                    table.column(1).data().unique().sort().each(function(d) {
+                        var username = Array.isArray(d) ? d[0] : d;
+                        usernameSelect.append('<option value="' + username + '">' + username + '</option>');
+                    });
+                    usernameSelect.on('change', function() {
+                        table.column(1).search(this.value).draw();
+                    });
+                    
+                    $('.column-filter-widgets').append(
+                        $('<div class="column-filter-widget">').append(nameSelect)
+                    ).append(
+                        $('<div class="column-filter-widget">').append(usernameSelect)
+                    );
                 },
-                // Setting the top and bottom controls
-                sDom: 'r<"row alert alert-info view-filter"<"toolbar-filter"><W><"toolbar-br"><"dataTables-inline dataTables-left"p><"dataTables-inline dataTables-left"i><"dataTables-inline dataTables-left"l>><"row"<"span12"t>>>'
+                dom: 'r<"row alert alert-info view-filter"<"toolbar-filter"><"column-filter-widgets"><"toolbar-br"><"dataTables-inline dataTables-left"p><"dataTables-inline dataTables-left"i><"dataTables-inline dataTables-left"l>><t>',
             });
+            
+            // Remove Bootstrap classes from length select to fix display issues
+            $('.dataTables_length select').removeClass('form-select form-select-sm');
+            
             $("#${n}searchResults").show();
-            // Adding formatting to sDom
-            $("div.toolbar-br").html('<BR>');
-            $("div.toolbar-filter").html('<B><spring:message code="filters" htmlEscape="false" javaScriptEscape="true"/></B>:');
+            
+            // Adding formatting to sDom to match release version
+            $("div.toolbar-br").html('<br>');
+            $("div.toolbar-filter").html('<b>Filters</b>:');
         };
 
-        $(document).ready(function(){
-            $("#${n}searchForm").submit(function() {
+        $(function(){
+            // Find form dynamically if namespace fails
+            var $form = $("#${n}searchForm");
+            if ($form.length === 0) {
+                $form = $("form[id*='searchForm']");
+                console.log('Using fallback form selector, found:', $form.length, 'forms');
+            }
+            
+            // Also find table with fallback
+            var $table = $("#${n}resultsTable");
+            if ($table.length === 0) {
+                $table = $("table[id*='resultsTable']");
+                console.log('Using fallback table selector, found:', $table.length, 'tables');
+            }
+            
+            $form.on('submit', function(e) {
+                e.preventDefault();
                 var queryData = { searchTerms: [] };
                 var searchTerm = $("#${n}queryValue").val();
                 var queryTerm = $("#${n}queryAttribute").val();
@@ -257,16 +349,28 @@
                     queryData.searchTerms.push(queryTerm);
                     queryData[queryTerm] = searchTerm;
                 }
+                
                 // To allow the datatable to be repopulated to search multiple times
                 // clear and destroy the original
-                if (personList_configuration.main.table != undefined && typeof personList_configuration.main.table.fnClearTable !== 'undefined') {
+                if (personList_configuration.main.table != undefined && $.fn.DataTable.isDataTable('#${n}resultsTable')) {
                     $("#${n}searchResults").hide();
-                    personList_configuration.main.table.fnClearTable();
-                    personList_configuration.main.table.fnDestroy();
+                    // Properly cleanup DataTables to prevent memory leaks
+                    personList_configuration.main.table.clear().draw();
+                    personList_configuration.main.table.destroy(); // Don't remove from DOM
+                    personList_configuration.main.table = null;
                 }
                 showSearchResults(queryData);
                 return false;
             });
+            
+            // Cleanup on page unload to prevent memory leaks
+            $(window).on('beforeunload', function() {
+                if (personList_configuration.main.table != undefined && $.fn.DataTable.isDataTable('#${n}resultsTable')) {
+                    personList_configuration.main.table.clear();
+                    personList_configuration.main.table.destroy();
+                    personList_configuration.main.table = null;
+                }
+            });
         });
     });
     </script>
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/portal-administration/administrativeLinks.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/portal-administration/administrativeLinks.jsp
index 8a50c81c254..0deccc8ca0b 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/portal-administration/administrativeLinks.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/portal-administration/administrativeLinks.jsp
@@ -22,15 +22,15 @@
 <c:set var="n"><portlet:namespace/></c:set>
 
 <!-- Portlet -->
-<div id="${n}adminLinks" class="fl-widget portlet portal-adm view-links" role="section">
+<div id="${n}adminLinks" class="card portlet portal-adm view-links" role="section">
 
   <!-- Portlet Titlebar -->
-  <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead">
+  <div class="card-header titlebar portlet-titlebar" role="sectionhead">
     <h2 class="title" role="heading">Portal Administration Tools</h2>
   </div>
 
   <!-- Portlet Content -->
-  <div class="fl-widget-content content portlet-content">
+  <div class="card-body content portlet-content">
 
     <!-- Portlet Section -->
     <div class="portlet-section" role="region">
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/portlet-manager/confirmRemove.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/portlet-manager/confirmRemove.jsp
index 87bd3e0d491..d3de0086305 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/portlet-manager/confirmRemove.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/portlet-manager/confirmRemove.jsp
@@ -32,23 +32,23 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
 | the user interface of this portlet
 | including HTML, CSS, JavaScript, accessibilty,
 | naming conventions, 3rd Party libraries
-| (like jQuery and the Fluid Skinning System)
+| (like jQuery and Bootstrap)
 | and more, refer to:
 | docs/SKINNING_UPORTAL.md
 -->
     
 <!-- Portlet -->
-<div class="fl-widget portlet ptl-mgr view-confirmremove" role="section">
+<div class="card portlet ptl-mgr view-confirmremove" role="section">
 
 	<!-- Portlet Title -->
-  <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead">
+  <div class="card-header titlebar portlet-titlebar" role="sectionhead">
   	<h2 class="title" role="heading">
       <spring:message code="remove.portlet"/>
     </h2>
   </div> <!-- end: portlet-titlebar -->
   
   <!-- Portlet Content -->
-  <div class="fl-widget-content content portlet-content">
+  <div class="card-body content portlet-content">
 
     <form:form modelAttribute="portlet" action="${submitUrl}" method="POST">
 
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/portlet-manager/listChannels.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/portlet-manager/listChannels.jsp
index ce7e3e70b9b..942a546f85c 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/portlet-manager/listChannels.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/portlet-manager/listChannels.jsp
@@ -49,7 +49,7 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
 | the user interface of this portlet
 | including HTML, CSS, JavaScript, accessibilty,
 | naming conventions, 3rd Party libraries
-| (like jQuery and the Fluid Skinning System)
+| (like jQuery and Bootstrap)
 | and more, refer to:
 | docs/SKINNING_UPORTAL.md
 -->
@@ -61,6 +61,10 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
 #${n}portletBrowser .dataTables-inline, #${n}portletBrowser .column-filter-widgets {
     display: inline-block;
 }
+#${n}portletBrowser .view-filter {
+    padding-bottom: 15px;
+    overflow: hidden;
+}
 #${n}portletBrowser .dataTables_wrapper {
     width: 100%;
 }
@@ -96,22 +100,40 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
 
 #${n}portletBrowser .filter-term {
     display: block;
-    text-align:bottom;
+    margin: 2px 0;
+    padding: 2px 8px;
+    background-color: #d9edf7;
+    border: 1px solid #bce8f1;
+    border-radius: 3px;
+    color: #31708f;
+    text-decoration: none;
+    font-size: 12px;
+    cursor: pointer;
+    width: fit-content;
+}
+#${n}portletBrowser .filter-term:hover {
+    background-color: #c4e3f3;
+    text-decoration: none;
 }
 
 #${n}portletBrowser .dataTables_length label {
     font-weight: normal;
 }
+#${n}portletBrowser .dataTables_length select {
+    display: inline-block !important;
+    width: auto;
+    margin: 0 5px;
+}
 #${n}portletBrowser .datatable-search-view {
     text-align:right;
 }
 </style>
 
 <!-- Portlet -->
-<div id="${n}portletBrowser" class="fl-widget portlet ptl-mgr view-home" role="section">
+<div id="${n}portletBrowser" class="card portlet ptl-mgr view-home" role="section">
   <c:if test="${not empty statusMsgCode}">
     <div class="alert alert-success alert-dismissable">
-      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-hidden="true"></button>
       <spring:message code="${statusMsgCode}" arguments="${portlet.name}" htmlEscape="true"/>
       <c:if test="${not empty layoutURL}">
         <spring:message code="add.portlet.to.layout" arguments="${layoutURL}" htmlEscape="false"/>
@@ -119,17 +141,17 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
     </div>
   </c:if>
   <!-- Portlet Titlebar -->
-  <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead">
+  <div class="card-header titlebar portlet-titlebar" role="sectionhead">
     <h2 class="title" role="heading"><spring:message code="portlet.registry"/></h2>
     <div class="fl-col-flex2 toolbar" role="toolbar">
       <div class="fl-col">
-        <ul class="btn-group">
-          <li class="btn"><a class="btn btn-primary button" href="${ newPortletUrl }" title="<spring:message code="register.new.portlet"/>"><span><spring:message code="register.new.portlet"/></span>&nbsp;&nbsp;<i class="fa fa-plus-circle"></i></a></li>
-        </ul>
+        <div class="btn-group" role="group">
+          <a class="btn btn-primary" href="${ newPortletUrl }" title="<spring:message code="register.new.portlet"/>"><span><spring:message code="register.new.portlet"/></span>&nbsp;&nbsp;<i class="fa fa-plus-circle"></i></a>
+        </div>
       </div>
-      <div class="fl-col fl-text-align-right datatable-search-view">
-        <form class="portlet-search-form form-inline" style="display:inline">
-          <label for="${n}search">
+      <div class="fl-col text-end datatable-search-view">
+        <form class="portlet-search-form d-flex align-items-center gap-2" style="display:inline">
+          <label for="${n}search" class="form-label">
             <spring:message code="search"/>
           </label>
           <input id="${n}search" type="search" class="portlet-search-input form-control"/>
@@ -140,7 +162,7 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
   </div>
 
   <!-- Portlet Content -->
-  <div class="fl-widget-content content portlet-content">
+  <div class="card-body content portlet-content">
       <div>
         <table id="${n}portletsList" class="portlet-table table table-bordered table-striped table-hover" style="width:100%;">
           <thead>
@@ -150,7 +172,6 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
               <th><spring:message code="state"/></th>
               <th><spring:message code="edit"/></th>
               <th><spring:message code="delete"/></th>
-              <th><spring:message code="category"/></th>
             </tr>
           </thead>
         </table>
@@ -182,114 +203,196 @@ up.jQuery(function() {
     // Url generating helper functions
     var getEditURL = function(portletId) {
         var url = '${editPortletUrl}'.replace("PORTLETID", portletId);
-        return '<a href="' + url + '"><spring:message code="edit" htmlEscape="false" javaScriptEscape="true"/> <span class="pull-right"><i class="fa fa-edit"></i></span></a>';
+        return '<a href="' + url + '"><spring:message code="edit" htmlEscape="false" javaScriptEscape="true"/> <span class="float-end"><i class="fa fa-edit"></i></span></a>';
     };
     var getDeleteURL = function(portletId) {
         var url = '${removePortletUrl}'.replace("PORTLETID", portletId);
-        return '<a href="' + url + '"><spring:message code="delete" htmlEscape="false" javaScriptEscape="true"/> <span class="pull-right"><i class="fa fa-trash-o"></i></span></a>';
+        return '<a href="' + url + '"><spring:message code="delete" htmlEscape="false" javaScriptEscape="true"/> <span class="float-end"><i class="fa fa-trash-o"></i></span></a>';
+    };
+
+    // Global variables for category filtering
+    var selectedCategories = [];
+    var categorySearchFunction = function(settings, data, dataIndex) {
+        if (selectedCategories.length === 0) return true;
+        
+        var table = portletList_configuration.main.table;
+        var portlet = table.row(dataIndex).data();
+        if (!portlet.categories || !Array.isArray(portlet.categories)) return false;
+        
+        // OR logic: show if portlet has ANY of the selected categories
+        return selectedCategories.some(function(term) {
+            return portlet.categories.indexOf(term) !== -1;
+        });
+    };
+    
+    var createFilters = function(table) {
+        var $columnFilterWidgets = $('<div class="column-filter-widgets"></div>');
+        
+        // State filter
+        var stateSelect = $('<select class="form-control"><option value="">State</option></select>');
+        var stateData = table.column(2).data().unique().sort();
+        stateData.each(function(state) {
+            stateSelect.append('<option value="' + state + '">' + state + '</option>');
+        });
+        stateSelect.on('change', function() {
+            table.column(2).search(this.value).draw();
+        });
+        
+        // Category filter
+        var categorySelect = $('<select class="form-control"><option value="">Category</option></select>');
+        var allCategories = [];
+        table.data().each(function(portlet) {
+            if (portlet.categories && Array.isArray(portlet.categories)) {
+                allCategories = allCategories.concat(portlet.categories);
+            }
+        });
+        var uniqueCategories = [...new Set(allCategories)].sort();
+        uniqueCategories.forEach(function(cat) {
+            categorySelect.append('<option value="' + cat + '">' + cat + '</option>');
+        });
+        
+        var $categoryWidget = $('<div class="column-filter-widget"></div>');
+        $categoryWidget.append(categorySelect);
+        
+        categorySelect.on('change', function() {
+            var selectedValue = this.value;
+            if (selectedValue && selectedCategories.indexOf(selectedValue) === -1) {
+                selectedCategories.push(selectedValue);
+                
+                var $filterTerm = $('<a class="filter-term" href="#">' + selectedValue + '</a>');
+                $filterTerm.on('click', function(e) {
+                    e.preventDefault();
+                    var termText = $(this).text();
+                    selectedCategories = selectedCategories.filter(function(cat) {
+                        return cat !== termText;
+                    });
+                    $(this).remove();
+                    updateCategoryFilter();
+                });
+                $categoryWidget.append($filterTerm);
+                updateCategoryFilter();
+            }
+            this.value = '';
+        });
+        
+        function updateCategoryFilter() {
+            // Remove existing search function
+            $.fn.dataTable.ext.search = $.fn.dataTable.ext.search.filter(function(fn) {
+                return fn !== categorySearchFunction;
+            });
+            
+            // Add it back if we have selected categories
+            if (selectedCategories.length > 0) {
+                $.fn.dataTable.ext.search.push(categorySearchFunction);
+            }
+            
+            table.draw();
+        }
+        
+        $columnFilterWidgets.append(
+            $('<div class="column-filter-widget">').append(stateSelect)
+        ).append($categoryWidget);
+        
+        $('.toolbar-filter-options').append($columnFilterWidgets);
     };
 
     // Created as its own
     var initializeTable = function() {
-        portletList_configuration.main.table = $("#${n}portletsList").dataTable({
-            iDisplayLength: portletList_configuration.main.pageSize,
-            aLengthMenu: [5, 10, 20, 50],
-            bServerSide: false,
-            sAjaxSource: '<c:url value="/api/portlets.json"/>',
-            sAjaxDataProp: "portlets",
-            bDeferRender: false,
-            bProcessing: true,
-            bAutoWidth: false,
-            sPaginationType: 'full_numbers',
-            oLanguage: {
-                sLengthMenu: '<spring:message code="datatables.length-menu.message" htmlEscape="false" javaScriptEscape="true"/>',
-                oPaginate: {
-                    sPrevious: '<spring:message code="datatables.paginate.previous" htmlEscape="false" javaScriptEscape="true"/>',
-                    sNext: '<spring:message code="datatables.paginate.next" htmlEscape="false" javaScriptEscape="true"/>'
+        portletList_configuration.main.table = $("#${n}portletsList").DataTable({
+            pageLength: portletList_configuration.main.pageSize,
+            lengthMenu: [5, 10, 20, 50],
+            serverSide: false,
+            ajax: {
+                url: '<c:url value="/api/portlets.json"/>',
+                dataSrc: "portlets",
+                error: function (xhr, error, thrown) {
+                    console.error('AJAX Error:', xhr.status, xhr.responseText, error, thrown);
                 }
             },
-            aoColumns: [
-                { mData: 'name', sType: 'html', sWidth: '30%' },  // Name
-                { mData: 'type', sType: 'html', sWidth: '30%' },  // Type
-                { mData: 'lifecycleState', sType: 'html', sWidth: '20%' },  // Lifecycle State
-                { mData: 'id', sType: 'html', bSearchable: false, sWidth: '10%' },  // Edit Link
-                { mData: 'id', sType: 'html', bSearchable: false, sWidth: '10%' },  // Delete Link
-                {
-                    mData: function(source, type) {
-                        // this function sets the value (set), returns original source of value (undefined), and then returns the value
-                        if (type === undefined) {
-                            return source.categories;
-                        } else if (type === 'set') {
-                            source.display = source.categories.join();
-                            return;
-                        }
-                        // 'display', 'filter', 'sort', and 'type' all just use the formatted string
-                        return source.display;
-                    },
-                    bSearchable: true,
-                    bVisible: false,
-                    asSorting: [ "desc", "asc" ]
-                }  // Categories - hidden
+            deferRender: false,
+            processing: true,
+            autoWidth: false,
+            pagingType: 'full_numbers',
+            language: {
+                lengthMenu: '_MENU_ per page',
+                paginate: {
+                    previous: '<spring:message code="datatables.paginate.previous" htmlEscape="false" javaScriptEscape="true"/>',
+                    next: '<spring:message code="datatables.paginate.next" htmlEscape="false" javaScriptEscape="true"/>'
+                }
+            },
+            columns: [
+                { data: 'name', type: 'html', width: '30%' },
+                { data: 'type', type: 'html', width: '30%' },
+                { data: 'lifecycleState', type: 'html', width: '20%' },
+                { data: 'id', type: 'html', searchable: false, width: '10%' },
+                { data: 'id', type: 'html', searchable: false, width: '10%' }
             ],
-            fnInitComplete: function (oSettings) {
-                //portletList_configuration.main.table.fnDraw();
-                // Adding formatting to sDom
-                $("div.toolbar-br").html('<BR>');
-                $("div.toolbar-filter").html('<h4><spring:message code="filters" htmlEscape="false" javaScriptEscape="true"/></h4>');
-                $(".column-filter-widget select").addClass("form-control");
+            initComplete: function (settings) {
+                this.api().draw();
+                $("div.toolbar-br").html('<br>');
+                $("div.toolbar-filter").html('<h4>Filters</h4>');
             },
-            fnServerData: function (sUrl, aoData, fnCallback, oSettings) {
-                oSettings.jqXHR = $.ajax({
-                    url: sUrl,
-                    data: aoData,
-                    dataType: "json",
-                    cache: false,
-                    type: oSettings.sServerMethod,
-                    success: function (json) {
-                        if (json.sError) {
-                            oSettings.oApi._fnLog(oSettings, 0, json.sError);
-                        }
-
-                        $(oSettings.oInstance).trigger('xhr', [oSettings, json]);
-                        fnCallback(json);
-                    },
-                    error: function (xhr, error, thrown) {
-                        lib.handleError(xhr, error, thrown);
-                    }
-                });
+            rowCallback: function (row, data, displayNum, displayIndex, dataIndex) {
+                $('td:eq(3)', row).html( getEditURL(data.id) );
+                $('td:eq(4)', row).html( getDeleteURL(data.id) );
             },
-            fnInfoCallback: function( oSettings, iStart, iEnd, iMax, iTotal, sPre ) {
+            infoCallback: function( settings, start, end, max, total, pre ) {
                 var infoMessage = '<spring:message code="datatables.info.message" htmlEscape="false" javaScriptEscape="true"/>';
-                var iCurrentPage = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1;
-                infoMessage = infoMessage.replace(/_START_/g, iStart).
-                                      replace(/_END_/g, iEnd).
-                                      replace(/_TOTAL_/g, iTotal).
-                                      replace(/_CURRENT_PAGE_/g, iCurrentPage);
+                var currentPage = Math.ceil(settings._iDisplayStart / settings._iDisplayLength) + 1;
+                infoMessage = infoMessage.replace(/_START_/g, start)
+                                    .replace(/_END_/g, end)
+                                    .replace(/_TOTAL_/g, total)
+                                    .replace(/_CURRENT_PAGE_/g, currentPage);
                 return infoMessage;
             },
-            // Add links to the proper columns after we get the data
-            fnRowCallback: function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
-                // Create edit and delete links
-                $('td:eq(3)', nRow).html( getEditURL(aData.id) );
-                $('td:eq(4)', nRow).html( getDeleteURL(aData.id) );
+            drawCallback: function() {
+                var table = this.api();
+                
+                // Wait for data to be loaded
+                if (table.data().length === 0) {
+                    return;
+                }
+                
+                // Only create filters once
+                if ($('.toolbar-filter-options').children().length === 0) {
+                    createFilters(table);
+                }
+                
+                // Convert pagination to match release version structure
+                var $paginate = $('.dataTables_paginate');
+                var $ul = $paginate.find('ul');
+                if ($ul.length) {
+                    $ul.find('.paginate_button').each(function() {
+                        var $li = $(this);
+                        var $link = $li.find('a');
+                        if ($link.length) {
+                            var newClass = $li.attr('class').replace('page-item', 'paginate_button').replace(/\bpage-link\b/g, '');
+                            $link.attr('class', newClass);
+                            $paginate.append($link);
+                        }
+                    });
+                    $ul.remove();
+                }
+                
+                $('.dataTables_length select').removeClass('form-select form-select-sm');
             },
-            // Setting the top and bottom controls
-            sDom: 'r<"row alert alert-info view-filter"<"toolbar-filter"><"toolbar-filter-options"W><"toolbar-br"><"dataTables-inline dataTables-right"p><"dataTables-inline dataTables-left"i><"dataTables-inline dataTables-left"l>><"row"<"span12"t>>',
-            // Filtering
-            oColumnFilterWidgets: {
-                sSeparator: ',', // Used for multivalue column Categories
-                aiExclude: [portletList_configuration.column.name,
-                                portletList_configuration.column.type,
-                                portletList_configuration.column.placeHolderForEditLink,
-                                portletList_configuration.column.placeHolderForDeleteLink]
-            }
+            dom: 'r<"row alert alert-info view-filter"<"toolbar-filter"><"toolbar-filter-options"><"toolbar-br"><"dataTables-inline dataTables-right"p><"dataTables-inline dataTables-left"i><"dataTables-inline dataTables-left"l>><"row"<"span12"t>>'
         });
     };
 
     initializeTable();
     // Hide the out of the box search and populate it with our text box
-    $('#${n}portletBrowser .portlet-search-input').keyup(function(){
-        portletList_configuration.main.table.fnFilter( $(this).val() );
+    $('#${n}portletBrowser .portlet-search-input').on('keyup', function(){
+        portletList_configuration.main.table.search( $(this).val() ).draw();
+    });
+    
+    // Cleanup on page unload to prevent memory leaks
+    $(window).on('beforeunload', function() {
+        if (portletList_configuration.main.table != undefined && $.fn.DataTable.isDataTable('#${n}portletsList')) {
+            portletList_configuration.main.table.clear();
+            portletList_configuration.main.table.destroy();
+            portletList_configuration.main.table = null;
+        }
     });
 });
 </script>
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/reset-my-layout/reset-begin.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/reset-my-layout/reset-begin.jsp
index 3e50325c420..e8b53beaffa 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/reset-my-layout/reset-begin.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/reset-my-layout/reset-begin.jsp
@@ -24,9 +24,9 @@
 </portlet:actionURL>
         
 <!-- Portlet -->
-<div class="fl-widget portlet" role="section">
+<div class="card portlet" role="section">
   <!-- Portlet Body -->
-  <div class="fl-widget-content portlet-body">
+  <div class="card-body portlet-body">
     <!-- Portlet Section -->
     <div class="portlet-section" role="region">
       <div class="portlet-section-body">   
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/reset-password/createPassword.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/reset-password/createPassword.jsp
index dbfcecfdc0f..ef0f3477e97 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/reset-password/createPassword.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/reset-password/createPassword.jsp
@@ -25,15 +25,15 @@
 <c:set var="n"><portlet:namespace/></c:set>
 
 <!-- Portlet -->
-<div class="fl-widget portlet" role="section">
+<div class="card portlet" role="section">
 
     <!-- Portlet Titlebar -->
-    <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead" data-role="header">
+    <div class="card-header titlebar portlet-titlebar" role="sectionhead" data-role="header">
         <h2 class="title" role="heading"><spring:message code="set.new.account.password"/></h2>
     </div> <!-- end: portlet-titlebar -->
 
     <!-- Portlet Body -->
-    <div class="fl-widget-content content portlet-content" data-role="content">
+    <div class="card-body content portlet-content" data-role="content">
 
         <form:form modelAttribute="accountForm" action="${formUrl}" method="POST">
 
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/reset-password/createPasswordSuccess.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/reset-password/createPasswordSuccess.jsp
index 2047b59cc94..882a90eb305 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/reset-password/createPasswordSuccess.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/reset-password/createPasswordSuccess.jsp
@@ -26,15 +26,15 @@
 <c:set var="n"><portlet:namespace/></c:set>
 
 <!-- Portlet -->
-<div class="fl-widget portlet" role="section">
+<div class="card portlet" role="section">
 
     <!-- Portlet Titlebar -->
-    <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead" data-role="header">
+    <div class="card-header titlebar portlet-titlebar" role="sectionhead" data-role="header">
         <h2 class="title" role="heading"><spring:message code="success"/></h2>
     </div> <!-- end: portlet-titlebar -->
 
     <!-- Portlet Body -->
-    <div class="fl-widget-content content portlet-content" data-role="content">
+    <div class="card-body content portlet-content" data-role="content">
 
         <p>
             <spring:message code="your.password.has.been.updated.successfully"/>
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/reset-password/invalidLoginToken.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/reset-password/invalidLoginToken.jsp
index 2bbdde3eff9..234c929afeb 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/reset-password/invalidLoginToken.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/reset-password/invalidLoginToken.jsp
@@ -26,15 +26,15 @@
 <c:set var="n"><portlet:namespace/></c:set>
 
 <!-- Portlet -->
-<div class="fl-widget portlet" role="section">
+<div class="card portlet" role="section">
 
     <!-- Portlet Titlebar -->
-    <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead" data-role="header">
+    <div class="card-header titlebar portlet-titlebar" role="sectionhead" data-role="header">
         <h2 class="title" role="heading"><spring:message code="invalid.password.reset.url"/></h2>
     </div> <!-- end: portlet-titlebar -->
 
     <!-- Portlet Body -->
-    <div class="fl-widget-content content portlet-content" data-role="content">
+    <div class="card-body content portlet-content" data-role="content">
 
         <p>
             <spring:message code="we.were.unable.to.validate.your.password.reset.url"/>
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/reset-user-layout/reset-confirm.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/reset-user-layout/reset-confirm.jsp
index 4d93facbe0b..9324566c869 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/reset-user-layout/reset-confirm.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/reset-user-layout/reset-confirm.jsp
@@ -29,10 +29,10 @@
 </portlet:renderURL>
 
 <!-- Portlet -->
-<div class="fl-widget portlet reset-layout view-result" role="section">
+<div class="card portlet reset-layout view-result" role="section">
 
     <!-- Portlet Title -->
-    <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead">
+    <div class="card-header titlebar portlet-titlebar" role="sectionhead">
     	<h2 class="title" role="heading">
             <a href="${ userUrl }">${ fn:escapeXml(person.name )}</a> >
     	    <spring:message code="reset.user.layout"/>
@@ -40,7 +40,7 @@
     </div> <!-- end: portlet-titlebar -->
 
     <!-- Portlet Content -->
-	<div class="fl-widget-content content portlet-content">
+	<div class="card-body content portlet-content">
 
         <form action="${formUrl}" method="POST">
 
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/reset-user-layout/reset-result.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/reset-user-layout/reset-result.jsp
index d8fbe1d8606..b699d489220 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/reset-user-layout/reset-result.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/reset-user-layout/reset-result.jsp
@@ -24,15 +24,15 @@
 </portlet:actionURL>
         
 <!-- Portlet -->
-<div class="fl-widget portlet reset-layout view-result" role="section">
+<div class="card portlet reset-layout view-result" role="section">
 
     <!-- Portlet Titlebar -->
-    <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead">
+    <div class="card-header titlebar portlet-titlebar" role="sectionhead">
     	<h2 class="title" role="heading"><spring:message code="reset.user.layout"/></h2>
     </div>
     
     <!-- Portlet Content -->
-	<div class="fl-widget-content content portlet-content">
+	<div class="card-body content portlet-content">
     
     <!-- Messages --> 
     <div class="portlet-msg-success portlet-msg success" role="status">
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/self-edit-account/editLocalAccount.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/self-edit-account/editLocalAccount.jsp
index fb4f00a7dbf..112a406fe2f 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/self-edit-account/editLocalAccount.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/self-edit-account/editLocalAccount.jsp
@@ -26,15 +26,15 @@
 <c:set var="n"><portlet:namespace/></c:set>
 
 <!-- Portlet -->
-<div class="fl-widget portlet user-mgr view-reviewuser" role="section">
+<div class="card portlet user-mgr view-reviewuser" role="section">
 
     <!-- Portlet Titlebar -->
-    <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead">
+    <div class="card-header titlebar portlet-titlebar" role="sectionhead">
         <h2 class="title" role="heading"><spring:message code="edit.my.account"/></h2>
     </div> <!-- end: portlet-titlebar -->
 
     <!-- Portlet Body -->
-    <div class="fl-widget-content content portlet-content">
+    <div class="card-body content portlet-content">
 
         <form:form id="${n}accountForm" modelAttribute="accountForm" action="${formUrl}" method="POST">
 
@@ -59,7 +59,7 @@
                             <c:forEach items="${ editAttributes }" var="attribute">
                                 <tr>
                                     <td class="attribute-name">
-                                        <label for="${ n }${ attribute.name }">
+                                        <label for="${ n }${ attribute.name }" class="form-label">
                                             <strong>
                                                 <spring:message code="${ attribute.label }"/>
                                             </strong>
@@ -104,7 +104,7 @@
                             <!--  Password and confirm password -->
                             <tr>
                                 <td class="attribute-name">
-                                  <label for="${n}password">
+                                  <label for="${n}password" class="form-label">
                                       <strong>
                                           <spring:message code="password"/>
                                       </strong>
@@ -116,7 +116,7 @@
                             </tr>
                             <tr>
                                 <td class="attribute-name">
-                                    <label for="${n}confirmPassword">
+                                    <label for="${n}confirmPassword" class="form-label">
                                         <strong>
                                             <spring:message code="confirm.password"/>
                                         </strong>
@@ -159,13 +159,13 @@
 <script type="text/javascript">
     up.jQuery(function() {
         var $ = up.jQuery;
-        $(document).ready(function(){
-            up.ParameterEditor(
-                $("#${n}userAttributes"),
+        $(function(){
+            new ModernParameterEditor(
+                $("#${n}userAttributes")[0],
                 {
                     parameterBindName: 'attributes',
                     multivalued: true,
-                    dialog: $("#${n}parameterForm"),
+                    dialog: $("#${n}parameterForm")[0],
                     displayClasses: {
                         deleteItemLink: "delete-attribute-link",
                         deleteValueLink: "delete-attribute-value-link",
@@ -178,7 +178,7 @@
                     }
                 }
             );
-            $("#${n}accountForm").submit(function(e) {
+            $("#${n}accountForm").on('submit', function(e) {
                 if ($("#${n}password").get(0).textLength > 0
                        && $("#${n}password").get(0).value != $("#${n}confirmPassword").get(0).value) {
                     alert ("<spring:message code="passwords.must.match" htmlEscape="false" javaScriptEscape="true"/>");
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/self-edit-account/enterPassword.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/self-edit-account/enterPassword.jsp
index 340d43dd626..6255e64175e 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/self-edit-account/enterPassword.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/self-edit-account/enterPassword.jsp
@@ -25,15 +25,15 @@
 <c:set var="n"><portlet:namespace/></c:set>
 
 <!-- Portlet -->
-<div class="fl-widget portlet user-mgr view-reviewuser" role="section">
+<div class="card portlet user-mgr view-reviewuser" role="section">
 
     <!-- Portlet Titlebar -->
-    <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead">
+    <div class="card-header titlebar portlet-titlebar" role="sectionhead">
         <h2 class="title" role="heading"><spring:message code="edit.my.account"/></h2>
     </div> <!-- end: portlet-titlebar -->
     
     <!-- Portlet Body -->
-    <div class="fl-widget-content content portlet-content">
+    <div class="card-body content portlet-content">
 
         <form:form modelAttribute="accountPasswordForm" action="${formUrl}" method="POST">
 
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/self-edit-account/success.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/self-edit-account/success.jsp
index 24bc27513fa..393533822a5 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/self-edit-account/success.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/self-edit-account/success.jsp
@@ -22,15 +22,15 @@
 <c:set var="n"><portlet:namespace/></c:set>
 
 <!-- Portlet -->
-<div id="${n}" class="fl-widget portlet user-mgr view-reviewuser" role="section">
+<div id="${n}" class="card portlet user-mgr view-reviewuser" role="section">
 
     <!-- Portlet Titlebar -->
-    <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead">
+    <div class="card-header titlebar portlet-titlebar" role="sectionhead">
         <h2 class="title" role="heading"><spring:message code="account.updated"/></h2>
     </div> <!-- end: portlet-titlebar -->
 
     <!-- Portlet Body -->
-    <div class="fl-widget-content content portlet-content">
+    <div class="card-body content portlet-content">
 
         <!-- Portlet Section -->
         <div class="portlet-section" role="region">
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/self-edit-account/viewAccountDetails.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/self-edit-account/viewAccountDetails.jsp
index 6713f782cc0..c974ba1a38c 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/self-edit-account/viewAccountDetails.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/self-edit-account/viewAccountDetails.jsp
@@ -26,10 +26,10 @@
 <c:set var="n"><portlet:namespace/></c:set>
 
 <!-- Portlet -->
-<div class="fl-widget portlet user-mgr view-reviewuser" role="section">
+<div class="card portlet user-mgr view-reviewuser" role="section">
 
     <!-- Portlet Titlebar -->
-    <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead">
+    <div class="card-header titlebar portlet-titlebar" role="sectionhead">
         <h2 class="title" role="heading"><spring:message code="my.account"/></h2>
         <c:if test="${ canEditAccount }">
             <div class="toolbar">
@@ -41,7 +41,7 @@
     </div> <!-- end: portlet-titlebar -->
     
     <!-- Portlet Body -->
-    <div class="fl-widget-content content portlet-content">
+    <div class="card-body content portlet-content">
 
         <!-- Portlet Section -->
         <div class="portlet-section" role="region">
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/snooper/snooper.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/snooper/snooper.jsp
index 3da661f96e3..2ff985eb357 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/snooper/snooper.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/snooper/snooper.jsp
@@ -21,16 +21,16 @@
 <%@ include file="/WEB-INF/jsp/include.jsp" %>
 
 <!-- Portlet -->
-<div class="fl-widget portlet snooper view-main" role="section">
+<div class="card portlet snooper view-main" role="section">
 
 	
     <!-- Portlet Titlebar -->
-    <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead">
+    <div class="card-header titlebar portlet-titlebar" role="sectionhead">
     	<h2 class="title" role="heading">Snooper Information</h2>
     </div>
     
     <!-- Portlet Content -->
-	<div class="fl-widget-content content portlet-content">
+	<div class="card-body content portlet-content">
   
         <!-- Portlet Section -->
         <div class="portlet-section" role="region">
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/toggle-resources-aggregation/toggle-aggregation.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/toggle-resources-aggregation/toggle-aggregation.jsp
index 52c326301be..da0a73626e5 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/toggle-resources-aggregation/toggle-aggregation.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/toggle-resources-aggregation/toggle-aggregation.jsp
@@ -24,15 +24,15 @@
 </portlet:actionURL>
     
 <!-- Portlet -->
-<div class="fl-widget portlet toggle-aggr view-main" role="section">
+<div class="card portlet toggle-aggr view-main" role="section">
 
     <!-- Portlet Titlebar -->
-    <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead">
+    <div class="card-header titlebar portlet-titlebar" role="sectionhead">
     	<h2 class="title" role="heading">Toggle Aggregation</h2>
     </div>
     
     <!-- Portlet Body -->
-    <div class="fl-widget-content content portlet-content">
+    <div class="card-body content portlet-content">
 	
         <div class="portlet-form">
             <form action="${actionUrl}" method="POST">
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/update-password/enterPassword.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/update-password/enterPassword.jsp
index b56d911c175..49a48c3dc47 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/update-password/enterPassword.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/update-password/enterPassword.jsp
@@ -25,15 +25,15 @@
 <c:set var="n"><portlet:namespace/></c:set>
 
 <!-- Portlet -->
-<div class="fl-widget portlet user-mgr view-reviewuser" role="section">
+<div class="card portlet user-mgr view-reviewuser" role="section">
 
     <!-- Portlet Titlebar -->
-    <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead">
+    <div class="card-header titlebar portlet-titlebar" role="sectionhead">
         <h2 class="title" role="heading"><spring:message code="update.my.password"/></h2>
     </div> <!-- end: portlet-titlebar -->
     
     <!-- Portlet Body -->
-    <div class="fl-widget-content content portlet-content">
+    <div class="card-body content portlet-content">
 
         <form:form modelAttribute="accountPasswordForm" action="${formUrl}" method="POST">
 
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/update-password/success.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/update-password/success.jsp
index c07c30a501a..aa9ad7b2245 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/update-password/success.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/update-password/success.jsp
@@ -26,15 +26,15 @@
 <c:set var="n"><portlet:namespace/></c:set>
 
 <!-- Portlet -->
-<div id="${n}" class="fl-widget portlet user-mgr view-reviewuser" role="section">
+<div id="${n}" class="card portlet user-mgr view-reviewuser" role="section">
 
     <!-- Portlet Titlebar -->
-    <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead">
+    <div class="card-header titlebar portlet-titlebar" role="sectionhead">
         <h2 class="title" role="heading"><spring:message code="update.my.password"/></h2>
     </div> <!-- end: portlet-titlebar -->
 
     <!-- Portlet Body -->
-    <div class="fl-widget-content content portlet-content">
+    <div class="card-body content portlet-content">
 
             <!-- Portlet Section -->
             <div class="portlet-section" role="region">
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/user-manager/confirmRemove.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/user-manager/confirmRemove.jsp
index dd9e3cf670f..4b26d694b98 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/user-manager/confirmRemove.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/user-manager/confirmRemove.jsp
@@ -36,16 +36,16 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
 | the user interface of this portlet
 | including HTML, CSS, JavaScript, accessibilty,
 | naming conventions, 3rd Party libraries
-| (like jQuery and the Fluid Skinning System)
+| (like jQuery and Bootstrap)
 | and more, refer to:
 | docs/SKINNING_UPORTAL.md
 -->
 
 <!-- Portlet -->
-<div class="fl-widget portlet ptl-mgr view-confirmremove" role="section">
+<div class="card portlet ptl-mgr view-confirmremove" role="section">
 
 	<!-- Portlet Title -->
-  <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead">
+  <div class="card-header titlebar portlet-titlebar" role="sectionhead">
   	<h2 class="title" role="heading">
       <a href="${ userUrl }">${ fn:escapeXml(person.name)}</a> >
       <spring:message code="remove.user"/>
@@ -53,7 +53,7 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
   </div> <!-- end: portlet-titlebar -->
 
   <!-- Portlet Content -->
-  <div class="fl-widget-content content portlet-content">
+  <div class="card-body content portlet-content">
 
     <form:form modelAttribute="channel" action="${submitUrl}" method="POST">
 
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/user-manager/selectUserAction.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/user-manager/selectUserAction.jsp
index 3c0abfca1c3..f8844fe77b9 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/user-manager/selectUserAction.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/user-manager/selectUserAction.jsp
@@ -30,30 +30,30 @@
 <c:set var="n"><portlet:namespace/></c:set>
 
 <!-- Portlet -->
-<div class="fl-widget portlet user-mgr view-selectuseraction" role="section">
+<div class="card portlet user-mgr view-selectuseraction" role="section">
     
     <!-- Portlet Titlebar -->
-    <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead">
+    <div class="card-header titlebar portlet-titlebar" role="sectionhead">
         <h2 class="title" role="heading">
             <spring:message code="manage.users" />
         </h2>
     </div> <!-- end: portlet-titlebar -->
     
     <!-- Portlet Content -->
-    <div class="fl-widget-content content portlet-content">
+    <div class="card-body content portlet-content">
     
-        <div class="panel-list icon-large">
-            <div class="panel">
-                <div class="titlebar">
-                    <h2 class="title">
+        <div class="card-list icon-large">
+            <div class="card">
+                <div class="card-body titlebar">
+                    <h2 class="card-title title">
                         <a href="${ createUserUrl }" class="btn btn-primary"><i class="fa fa-plus"></i> <spring:message code="create.new.user"/></a>
                     </h2>
                     <h3 class="subtitle"><spring:message code="create.new.user.description"/></h3>
                 </div>
             </div>
-            <div class="panel">
-                <div class="titlebar">
-                    <h2 class="title">
+            <div class="card">
+                <div class="card-body titlebar">
+                    <h2 class="card-title title">
                         <a href="${ findUserUrl }" class="btn btn-primary"><i class="fa fa-search"></i> <spring:message code="find.user"/></a>
                     </h2>
                     <h3 class="subtitle"><spring:message code="find.user.description"/></h3>
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/user-manager/viewPermissions.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/user-manager/viewPermissions.jsp
index cfadab772cf..b0af5503aa7 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/user-manager/viewPermissions.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/user-manager/viewPermissions.jsp
@@ -96,16 +96,16 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
 | the user interface of this portlet
 | including HTML, CSS, JavaScript, accessibilty,
 | naming conventions, 3rd Party libraries
-| (like jQuery and the Fluid Skinning System)
+| (like jQuery and Bootstrap)
 | and more, refer to:
 | docs/SKINNING_UPORTAL.md
 -->
 
 <!-- Portlet -->
-<div class="fl-widget portlet prm-mgr" role="section">
+<div class="card portlet prm-mgr" role="section">
 
     <!-- Portlet Titlebar -->
-    <div class="fl-widget-titlebar portlet-titlebar" role="sectionhead">
+    <div class="card-header portlet-titlebar" role="sectionhead">
         <h2 class="title" role="heading">
             <a href="${ userUrl }">${ fn:escapeXml(person.name )}</a> >
             <spring:message code="permissions"/>
@@ -113,7 +113,7 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
     </div> <!-- end: portlet-titlebar -->
 
     <!-- Portlet Content -->
-    <div id="${n}permissionBrowser" class="fl-widget-content portlet-content">
+    <div id="${n}permissionBrowser" class="card-body portlet-content">
 
         <!-- Portlet Section -->
         <div id="${n}permissionAddingTabs" class="portlet-section view-permissions" role="region">
@@ -285,12 +285,13 @@ up.jQuery(function() {
                 }
             },
             // Setting the top and bottom controls
-            sDom: 'r<"row alert alert-info view-filter"<"toolbar-filter"><W><"toolbar-br"><"dataTables-inline dataTables-left"p><"dataTables-inline dataTables-left"i><"dataTables-inline dataTables-left"l>><"row"<"span12"t>>>',
-            // Filtering
-            oColumnFilterWidgets: {
-                sSeparator: ',', // Used for multivalue column Categories
-                aiExclude: [config.column.placeHolderForEditLink,
-                            config.searchExclude]
+            sDom: 'r<"row alert alert-info view-filter"<"toolbar-filter"><P><"toolbar-br"><"dataTables-inline dataTables-left"p><"dataTables-inline dataTables-left"i><"dataTables-inline dataTables-left"l>><"row"<"span12"t>>>',
+            // SearchPanes configuration (modern replacement for ColumnFilterWidgets)
+            searchPanes: {
+                columns: [0, 2], // Owner and Activity columns
+                cascadePanes: true,
+                viewTotal: true,
+                layout: 'columns-2'
             }
         });
     };
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/flows/user-manager/viewUserDetails.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/flows/user-manager/viewUserDetails.jsp
index 236a3f1e77c..00d65490b38 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/flows/user-manager/viewUserDetails.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/flows/user-manager/viewUserDetails.jsp
@@ -46,34 +46,33 @@
 <c:set var="n"><portlet:namespace/></c:set>
 
 <!-- Portlet -->
-<div id="${n}" class="fl-widget portlet user-mgr view-reviewuser" role="section">
+<div id="${n}" class="card portlet user-mgr view-reviewuser" role="section">
 
     <!-- Portlet Titlebar -->
-    <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead">
+    <div class="card-header titlebar portlet-titlebar" role="sectionhead">
         <h2 class="title" role="heading">${ fn:escapeXml(person.name )}</h2>
         <div class="btn-group toolbar">
                 <c:if test="${ canEdit }">
-                    <a class="btn btn-default" href="${ editDetailsUrl }"><spring:message code="edit" text="Edit" /></a>
+                    <a class="btn btn-secondary" href="${ editDetailsUrl }"><spring:message code="edit" text="Edit" /></a>
                 </c:if>
-                <a class="btn btn-default" href="${ permissionsUrl }"><spring:message code="view.permissions" text="Permissions" /></a>
+                <a class="btn btn-secondary" href="${ permissionsUrl }"><spring:message code="view.permissions" text="Permissions" /></a>
                 <c:if test="${ canDelete }">
-                    <a class="btn btn-default" href="${ deleteUrl }"><spring:message code="delete" text="Delete" /></a>
+                    <a class="btn btn-secondary" href="${ deleteUrl }"><spring:message code="delete" text="Delete" /></a>
                 </c:if>
-                <a class="btn btn-default" href="${ resetLayoutUrl }"><spring:message code="reset.user.layout" text="Reset User Layout" /></a>
+                <a class="btn btn-secondary" href="${ resetLayoutUrl }"><spring:message code="reset.user.layout" text="Reset User Layout" /></a>
                 <c:if test="${ canImpersonate }">
-                	<a class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuImpersonate" data-toggle="dropdown">
+                	<a class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuImpersonate" data-bs-toggle="dropdown">
                     <spring:message code="impersonate" text="Impersonate"/>
-                    <span class="caret"></span>
                     </a>
                     <ul class="dropdown-menu dropdown-menu-right up-impersonation-menu" role="menu" aria-labelledby="dropdownMenuImpersonate">
-                      <li role="presentation"><a role="menuitem" tabindex="-1" data-href="${ impersonateUrl }" href="javascript:void(0)"><spring:message code="label.default.profile" text="Default Profile"/></a></li>
+                      <li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" data-href="${ impersonateUrl }" href="javascript:void(0)"><spring:message code="label.default.profile" text="Default Profile"/></a></li>
                       <c:forEach var="profile" items="${profiles}">
                         <portlet:actionURL var="swapDynamicURL">
                             <portlet:param name="execution" value="${flowExecutionKey}" />
                             <portlet:param name="_eventId" value="swapDynamic"/>
                             <portlet:param name="profile" value="${profile.value.profileFname}" />
                         </portlet:actionURL>
-                        <li role="presentation"><a role="menuitem" tabindex="-1" data-href="${ swapDynamicURL }" href="javascript:void(0)">${profile.value.profileName}</a></li>
+                        <li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" data-href="${ swapDynamicURL }" href="javascript:void(0)">${profile.value.profileName}</a></li>
                       </c:forEach>
                     </ul>
                 </c:if>
@@ -81,7 +80,7 @@
     </div> <!-- end: portlet-titlebar -->
 
     <!-- Portlet Body -->
-    <div class="fl-widget-content content portlet-content">
+    <div class="card-body content portlet-content">
 
         <!-- Portlet Section -->
         <div class="portlet-section" role="region">
@@ -129,7 +128,7 @@
         </div>
 
         <div class="buttons">
-            <a class="button btn btn-default" href="${ backUrl }"><spring:message code="back" text="Back" /></a>
+            <a class="button btn btn-secondary" href="${ backUrl }"><spring:message code="back" text="Back" /></a>
         </div>
     </div>
 </div>
@@ -137,14 +136,15 @@
 <script type="text/javascript">
 (function($) {
     // Impersonation requests must be an actionURL and a POST...
-    $('#${n} .up-impersonation-menu a').click(function() {
+    $('#${n} .up-impersonation-menu a').on('click', function(e) {
+        e.preventDefault();
         var url = $(this).attr('data-href');
         var form = $('<form />', {
             action: url,
             method: 'POST',
             style: 'display: none;'
         });
-        form.appendTo('body').submit();
+        form.appendTo('body')[0].submit();
     });
 })(up.jQuery);
 </script>
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Activity/activity.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Activity/activity.jsp
index 0ba38b248aa..fe55c5b2720 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Activity/activity.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Activity/activity.jsp
@@ -25,15 +25,15 @@
 PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
 | For the standards and guidelines that govern
 | the user interface of this portlet
-| including HTML, CSS, JavaScript, accessibilty,
+| including HTML, CSS, JavaScript, accessibility,
 | naming conventions, 3rd Party libraries
-| (like jQuery and the Fluid Skinning System)
+| (like jQuery and Bootstrap)
 | and more, refer to:
 | docs/SKINNING_UPORTAL.md
 -->
 
 <!-- Portlet -->
-<div class="fl-widget portlet portal-activity" role="section">
+<div class="card portlet portal-activity" role="section">
     <form id="${n}form">
 
         <!-- Portlet Body -->
@@ -110,11 +110,11 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
 </div>
 
 <script>
-up.jQuery( "#portalActivityToggle" ).click(function() {
+up.jQuery( "#portalActivityToggle" ).on('click', function() {
     up.jQuery( "#portalActivity" ).slideToggle( "slow" );
 });
 
-up.jQuery( "#portalSearchActivityToggle" ).click(function() {
+up.jQuery( "#portalSearchActivityToggle" ).on('click', function() {
     up.jQuery( "#portalSearchActivity" ).slideToggle( "slow" );
 });
 </script>
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/BackgroundPreference/viewBackgroundPreference.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/BackgroundPreference/viewBackgroundPreference.jsp
index 065605d0c8f..6807383d930 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/BackgroundPreference/viewBackgroundPreference.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/BackgroundPreference/viewBackgroundPreference.jsp
@@ -126,7 +126,7 @@
 </style>
 
 <div id="${n}background-edit-control">
-    <div class="background-edit-button fl-container-flex">
+    <div class="background-edit-button d-flex">
         <div class="edit-button-image"></div>
         <span class="edit-text">Change Background Image</span>
     </div>
@@ -199,11 +199,11 @@
             elements.menu = $('#${n}background-edit-control .background-edit-menu');
             elements.form = $("#${n}background-edit-control .background-edit-form");
 
-            elements.form.submit(function() {
+            elements.form.on('submit', function() {
                 $.post(this.action, elements.form.serialize());
                 return false;
             });
-            elements.button.click(function () {
+            elements.button.on('click', function () {
                 setWidth();
                 toggleMenu();
             });
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Directory/directory.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Directory/directory.jsp
index 5f576bc03c9..9e9ddfedec4 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Directory/directory.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Directory/directory.jsp
@@ -24,15 +24,15 @@
 <c:set var="n"><portlet:namespace/></c:set>
 
 <!-- Portlet -->
-<div class="fl-widget portlet" role="section">
+<div class="card portlet" role="section">
 
   <!-- Portlet Titlebar -->
-  <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead">
+  <div class="card-header titlebar portlet-titlebar" role="sectionhead">
     <h2 class="title" role="heading"><spring:message code="search.directory"/></h2>
   </div>
   
   <!-- Portlet Body -->
-  <div class="fl-widget-content portlet-body">
+  <div class="card-body portlet-body">
   
     <!-- Portlet Section -->
     <div id="${n}search" class="portlet-section" role="region">
@@ -40,7 +40,7 @@
       <div class="portlet-section-body">
 
         <form action="${ formUrl }" method="POST">
-            <label for="query">
+            <label for="query" class="form-label">
                  <spring:message code='search.directory'/>
             </label>
             <input id="query" name="query" value="${ fn:escapeXml(query )}"/>
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Directory/mobileDirectory.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Directory/mobileDirectory.jsp
index abf1bc282ca..a8835b11c56 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Directory/mobileDirectory.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Directory/mobileDirectory.jsp
@@ -125,9 +125,8 @@
 <script type="text/javascript">
 up.jQuery(function() {
     var $ = up.jQuery;
-    var fluid = up.fluid;
 
-    $(document).ready(function() { 
+    $(function() { 
 
         var showSearchForm = function() {
             $("#${n}search .search-form").show();
@@ -139,21 +138,21 @@ up.jQuery(function() {
         var showResults = function() {
             $("#${n}search .person-search-results-summary").show();
             $("#${n}search .person-search-result-detail").hide();
-            $("#${n}search .search-back-link").unbind("click").click(showSearchForm);
+            $("#${n}search .search-back-link").off("click").on('click', showSearchForm);
         };
 
-        $("#${n}search .search-back-link").unbind("click").click(showSearchForm);
+        $("#${n}search .search-back-link").off("click").on('click', showSearchForm);
 
         <c:if test="${not empty query}">
             $("#${n}search .person-result-link").each(function (idx, link) {
-                $(link).click(function () {
+                $(link).on('click', function () {
                     $("#${n}search .search-form").hide();
                     $("#${n}search .person-search-results-summary").hide();
                     $("#${n}search .person-search-result-detail").hide();
                     $($("#${n}search .person-search-result-detail").get(idx)).show();
                     
                     $("#${n}search .search-back-div").show();
-                    $("#${n}search .search-back-link").unbind("click").click(showResults);
+                    $("#${n}search .search-back-link").off("click").on('click', showResults);
                     return false;
                 });
             });
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/DynamicRespondrSkin/skinConfig.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/DynamicRespondrSkin/skinConfig.jsp
index ec349a7dac8..7d150b4eef5 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/DynamicRespondrSkin/skinConfig.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/DynamicRespondrSkin/skinConfig.jsp
@@ -44,15 +44,15 @@
 
             <div class="portlet-section-body">
 
-                <form id="${n}dynSkinForm" role="form" class="form-horizontal" action="${ saveUrl }" method="POST">
+                <form id="${n}dynSkinForm" role="form" class="" action="${ saveUrl }" method="POST">
 
-                    <div class="form-group">
-                        <label for="{n}PREFdynamicSkinEnabled" class="col-sm-4 control-label"><spring:message code="respondr.dynamic.skin.enabled"/></label>
+                    <div class="row mb-3">
+                        <label for="{n}PREFdynamicSkinEnabled" class="col-sm-4 col-form-label"><spring:message code="respondr.dynamic.skin.enabled"/></label>
                         <input type="checkbox" class="dynamicSelection" id="{n}PREFdynamicSkinEnabled" name="PREFdynamicSkinEnabled"
                                value="true" ${empty PREFdynamicSkinEnabled ? '' : 'checked'}/>
                     </div>
-                    <div class="form-group">
-                        <label for="{n}PREFdynamicSkinName" class="col-sm-4 control-label"><spring:message code="respondr.dynamic.skin.skinName"/></label>
+                    <div class="row mb-3">
+                        <label for="{n}PREFdynamicSkinName" class="col-sm-4 col-form-label"><spring:message code="respondr.dynamic.skin.skinName"/></label>
                         <select id="{n}PREFdynamicSkinName" name="PREFdynamicSkinName">
                             <option value="${PREFdynamicSkinName}" selected>${PREFdynamicSkinName}</option>
                             <c:forEach items="${skinNames}" var="skinName">
@@ -66,38 +66,38 @@
                     <div class="dynamicItems hidden">
                         <div class="row">
                             <div class="col-md-6">
-                                <div class="form-group">
-                                    <label for="{n}PREFcolor1" class="col-sm-8 control-label"><spring:message code="respondr.dynamic.skin.color1"/></label>
+                                <div class="row mb-3">
+                                    <label for="{n}PREFcolor1" class="col-sm-8 col-form-label"><spring:message code="respondr.dynamic.skin.color1"/></label>
                                     <input type="color" class="colorPicker dynamicItem" id="{n}PREFcolor1" name="PREFcolor1" value="${PREFcolor1}"/>
                                 </div>
-                                <div class="form-group">
-                                    <label for="{n}PREFcolor2" class="col-sm-8 control-label"><spring:message code="respondr.dynamic.skin.color2"/></label>
+                                <div class="row mb-3">
+                                    <label for="{n}PREFcolor2" class="col-sm-8 col-form-label"><spring:message code="respondr.dynamic.skin.color2"/></label>
                                     <input type="color" class="colorPicker dynamicItem" id="{n}PREFcolor2" name="PREFcolor2" value="${PREFcolor2}"/>
                                 </div>
-                                <div class="form-group">
-                                    <label for="{n}PREFcolor3" class="col-sm-8 control-label"><spring:message code="respondr.dynamic.skin.color3"/></label>
+                                <div class="row mb-3">
+                                    <label for="{n}PREFcolor3" class="col-sm-8 col-form-label"><spring:message code="respondr.dynamic.skin.color3"/></label>
                                     <input type="color" class="colorPicker dynamicItem" id="{n}PREFcolor3" name="PREFcolor3" value="${PREFcolor3}"/>
                                 </div>
                             </div>
                             <div class="col-md-6">
-                                <div class="form-group">
-                                    <label for="{n}PREFcolor4" class="col-sm-8 control-label"><spring:message code="respondr.dynamic.skin.color4"/></label>
+                                <div class="row mb-3">
+                                    <label for="{n}PREFcolor4" class="col-sm-8 col-form-label"><spring:message code="respondr.dynamic.skin.color4"/></label>
                                     <input type="color" class="colorPicker dynamicItem" id="{n}PREFcolor4" name="PREFcolor4" value="${PREFcolor4}"/>
                                 </div>
-                                <div class="form-group">
-                                    <label for="{n}PREFcolor5" class="col-sm-8 control-label"><spring:message code="respondr.dynamic.skin.color5"/></label>
+                                <div class="row mb-3">
+                                    <label for="{n}PREFcolor5" class="col-sm-8 col-form-label"><spring:message code="respondr.dynamic.skin.color5"/></label>
                                     <input type="color" class="colorPicker dynamicItem" id="{n}PREFcolor5" name="PREFcolor5" value="${PREFcolor5}"/>
                                 </div>
-                                <div class="form-group">
-                                    <label for="{n}PREFcolor6" class="col-sm-8 control-label"><spring:message code="respondr.dynamic.skin.color6"/></label>
+                                <div class="row mb-3">
+                                    <label for="{n}PREFcolor6" class="col-sm-8 col-form-label"><spring:message code="respondr.dynamic.skin.color6"/></label>
                                     <input type="color" class="colorPicker dynamicItem" id="{n}PREFcolor6" name="PREFcolor6" value="${PREFcolor6}"/>
                                 </div>
                             </div>
                         </div>
                     </div>
                     <div class="buttons">
-                        <button type="submit" class="saveButton btn btn-default"><spring:message code="save"/></button>
-                        <button type="button" class="cancelButton btn btn-default"><spring:message code="cancel"/></button>
+                        <button type="submit" class="saveButton btn btn-secondary"><spring:message code="save"/></button>
+                        <button type="button" class="cancelButton btn btn-secondary"><spring:message code="cancel"/></button>
                     </div>
                 </form>
                 <div class="loadingMessage hidden"><i class="fa fa-spinner fa-spin"></i></div>
@@ -126,7 +126,7 @@
             method: 'POST',
             style: 'display: none;'
         });
-        form.appendTo('body').submit();
+        form.appendTo('body')[0].submit();
     }
 
     var initDynSkin = function($, settings, portletSelector, formSelector) {
@@ -138,9 +138,9 @@
             $(settings.portletSelector).find(".loadingMessage").removeClass("hidden");
         };
 
-        $('#${n}skinManagerConfig .cancelButton').click(exitConfigMode);
+        $('#${n}skinManagerConfig .cancelButton').on('click', exitConfigMode);
 
-        $(settings.formSelector).submit(function (event) {
+        $(settings.formSelector).on('submit', function (event) {
             showLoading();
             $.ajax({
                 url: formUrl,
@@ -149,7 +149,7 @@
                 })
                 // We don't capture error since there is no way the portal will return a different status code on an
                 // action url. If there is an error we'd get a web page with content that displayed an error message.
-                .success(function(data, textStatus, jqXHR) {
+                .done(function(data, textStatus, jqXHR) {
                     exitConfigMode();
                 });
             event.preventDefault();
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Favorites/edit.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Favorites/edit.jsp
index e2196ba72f1..6313fa58cd2 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Favorites/edit.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Favorites/edit.jsp
@@ -35,7 +35,7 @@
 
     <c:if test="${not empty errorMessageCode}">
       <div class="alert alert-warning alert-dismissable">
-        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
           <spring:message
                   code="${errorMessageCode}"
                   text="Un-defined error message."
@@ -45,7 +45,7 @@
 
     <c:if test="${not empty successMessageCode}">
       <div class="alert alert-success alert-dismissable">
-        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
         <spring:message
                 code="${successMessageCode}"
                 text="Un-defined success message."
@@ -62,22 +62,22 @@
         </portlet:actionURL>
         <li class="list-group-item ${collection.moveAllowed ? '' : 'sort-disabled'}" sourceID="${collection.id}">
           <c:if test="${collection.moveAllowed}">
-            <span class="glyphicon glyphicon-sort pull-left" style='padding-right: 1em; cursor: move;'></span>
+            <span class="glyphicon glyphicon-sort float-start" style='padding-right: 1em; cursor: move;'></span>
           </c:if>
           <c:choose>
             <c:when test="${collection.deleteAllowed}">
               <a class="up-remove-favorite" data-href="${unFavoriteCollectionUrl}" href="javascript:void(0)">
-                <span class="glyphicon glyphicon-trash pull-right" aria-label="Remove favorite collection"></span>
+                <span class="glyphicon glyphicon-trash float-end" aria-label="Remove favorite collection"></span>
               </a>
               <a href="${renderRequest.contextPath}/f/${collection.id}/render.uP">
                 ${collection.name}
               </a>
             </c:when>
             <c:otherwise>
-              <div data-toggle="tooltip" title="<spring:message
+              <div data-bs-toggle="tooltip" title="<spring:message
                   code="favorites.lack.permission.to.unfavorite.collection"
                   text="You lack permission to unfavorite this collection."/>">
-                <span class="glyphicon glyphicon-lock pull-right"></span>${collection.name}
+                <span class="glyphicon glyphicon-lock float-end"></span>${collection.name}
               </div>
               <c:set var="lockedItemListed" value="true" />
             </c:otherwise>
@@ -96,22 +96,22 @@
             <%-- That sort glyph may be shown when only one item and so nothing to re-order against is
                  deliberate, meant to communicate to the user that if he or she had more items they would then
                  be re-order-able, and meant to provide UI consistency in the one and more-than-one items cases. --%>
-            <span class="glyphicon glyphicon-sort pull-left" style='padding-right: 1em; cursor: move;'></span>
+            <span class="glyphicon glyphicon-sort float-start" style='padding-right: 1em; cursor: move;'></span>
           </c:if>
           <c:choose>
             <c:when test="${favorite.deleteAllowed}">
               <a class="up-remove-favorite" data-href="${unFavoritePortletUrl}" href="javascript:void(0)">
-                <span class="glyphicon glyphicon-trash pull-right" aria-label="Remove favorite"></span>
+                <span class="glyphicon glyphicon-trash float-end" aria-label="Remove favorite"></span>
               </a>
               <a href="${renderRequest.contextPath}/p/${favorite.functionalName}/render.uP">
                 ${favorite.name}
               </a>
             </c:when>
             <c:otherwise>
-              <div data-toggle="tooltip" title="<spring:message
+              <div data-bs-toggle="tooltip" title="<spring:message
                   code="favorites.lack.permission.to.unfavorite.portlet"
                   text="You lack permission to unfavorite this portlet."/>" >
-                <span class="glyphicon glyphicon-lock pull-right"></span>${favorite.name}
+                <span class="glyphicon glyphicon-lock float-end"></span>${favorite.name}
               </div>
               <c:set var="lockedItemListed" value="true" />
             </c:otherwise>
@@ -121,7 +121,7 @@
     </ul>
 
     <c:if test="${lockedItemListed}">
-      <span class="help-block"><spring:message
+      <span class="form-text"><spring:message
               code="favorites.lock.icon.legend"
               text="Favorites with the lock icon cannot be unfavorited."/>
       </span>
@@ -137,7 +137,7 @@
 
   <%-- Display short link to Marketplace if available, suppress otherwise --%>
   <c:if test="${not empty marketplaceUrl}">
-    <span class="pull-right">
+    <span class="float-end">
       <a href="${marketplaceUrl}">
         <spring:message code="favorites.invitation.to.marketplace.short" text="Visit Marketplace"/>
       </a>
@@ -148,7 +148,7 @@
 <script type="text/javascript">
 up.jQuery(function() {
     var $ = up.jQuery;
-    $(document).ready( function () {
+    $(function () {
         $('#${n}fav_edit .sortable-collections').sortable({
             deactivate: function(event, ui) {
                 up.moveStuff('Tab', ui.item[0], '${renderRequest.contextPath}');
@@ -162,7 +162,7 @@ up.jQuery(function() {
         $('#${n}fav_edit li').disableSelection();
 
         // Removing a favorite requires an actionURL and a POST...
-        $('#${n}fav_edit a.up-remove-favorite').click(function() {
+        $('#${n}fav_edit a.up-remove-favorite').on('click', function() {
             var url = $(this).attr('data-href');
             var form = $('<form />', {
                 action: url,
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Favorites/edit_zero.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Favorites/edit_zero.jsp
index bf86e264c08..911675a002d 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Favorites/edit_zero.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Favorites/edit_zero.jsp
@@ -32,7 +32,7 @@
        got-no-favorites state through a user action that generated a message. --%>
   <c:if test="${not empty errorMessageCode}">
       <div class="alert alert-warning alert-dismissable">
-          <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-hidden="true"></button>
           <spring:message
                   code="${errorMessageCode}"
                   text="Un-defined error message."
@@ -42,7 +42,7 @@
 
   <c:if test="${not empty successMessageCode}">
       <div class="alert alert-success alert-dismissable">
-          <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-hidden="true"></button>
           <spring:message
                   code="${successMessageCode}"
                   text="Un-defined success message."
@@ -64,7 +64,7 @@
   <%-- Display short link to Marketplace if available, suppress otherwise --%>
   <%-- Included even though redundant with link above, for consistency with UI when user has favorites. --%>
   <c:if test="${not empty marketplaceUrl}">
-    <span class="pull-right">
+    <span class="float-end">
       <a href="${marketplaceUrl}">
         <spring:message code="favorites.invitation.to.marketplace.short" text="Visit Marketplace"/>
       </a>
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Favorites/view.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Favorites/view.jsp
index ebb09d440e7..1b26bce9feb 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Favorites/view.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Favorites/view.jsp
@@ -30,76 +30,73 @@
     <style>#fav-portlet-${n} .favorites-list { max-height: ${maxHeightPixels}px; overflow-y: auto; }</style>
 </c:if>
 
-<nav class="navbar navbar-default" id="${n}">
-    <!-- Brand and toggle get grouped for better mobile display -->
-    <div class="navbar-header">
-        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#fav-portlet-${n}">
-            <span class="sr-only">Toggle navigation</span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-        </button>
+<nav class="navbar navbar-expand-lg navbar-light bg-light" id="${n}">
+    <div class="container-fluid">
+        <!-- Brand and toggle get grouped for better mobile display -->
         <a class="navbar-brand" href="#"><spring:message code="favorites"/></a>
-    </div>
+        <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#fav-portlet-${n}" aria-controls="fav-portlet-${n}" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
 
-    <!-- Collect the nav links, forms, and other content for toggling -->
-    <div class="collapse navbar-collapse" id="fav-portlet-${n}">
-        <ul class="list-group favorites-list">
-            <c:forEach var="collection" items="${collections}">
-                <li class="list-group-item">
-                    <i class="fa fa-chevron-right pull-right" aria-hidden="true"></i>
-                    <a href="${renderRequest.contextPath}/f/${collection.id}/render.uP">
-                        <span class="favorites-icon">
-                            <i class="fa fa-sitemap" aria-hidden="true"></i>
-                        </span>
-                        <c:out value="${collection.name}" />
-                    </a>
-                </li>
-            </c:forEach>
+        <!-- Collect the nav links, forms, and other content for toggling -->
+        <div class="collapse navbar-collapse" id="fav-portlet-${n}">
+            <ul class="list-group favorites-list">
+                <c:forEach var="collection" items="${collections}">
+                    <li class="list-group-item">
+                        <i class="fa fa-chevron-right float-end" aria-hidden="true"></i>
+                        <a href="${renderRequest.contextPath}/f/${collection.id}/render.uP">
+                            <span class="favorites-icon">
+                                <i class="fa fa-sitemap" aria-hidden="true"></i>
+                            </span>
+                            <c:out value="${collection.name}" />
+                        </a>
+                    </li>
+                </c:forEach>
 
-            <c:forEach var="favorite" items="${favorites}">
-                <li class="list-group-item">
-                    <a class="up-favorite-remove pull-right" data-portlet-id="${favorite.channelPublishId}" title="<spring:message code="remove.from.my.favorites" />" href="javascript:void(0);">
-                        <i class="fa fa-star" aria-hidden="true"></i>
-                    </a>
-                    <c:set var="favoriteAnchorContentTarget">
-                        <c:choose>
-                            <c:when test="${not empty favorite.parameterMap['alternativeMaximizedLinkTarget']}">${favorite.parameterMap['alternativeMaximizedLinkTarget']}</c:when>
-                            <c:otherwise>_blank</c:otherwise>
-                        </c:choose>
-                    </c:set>
-                    <c:set var="favoriteAnchorContent">
-                        <c:choose>
-                            <c:when test="${not empty favorite.parameterMap['alternativeMaximizedLink']}">href="${favorite.parameterMap['alternativeMaximizedLink']}" target="${favoriteAnchorContentTarget}" rel="noopener noreferrer"</c:when>
-                            <c:otherwise>href="${renderRequest.contextPath}/p/${favorite.functionalName}/render.uP"</c:otherwise>
-                        </c:choose>
-                    </c:set>
-                    <a ${favoriteAnchorContent}>
-                        <span class="favorites-icon">
+                <c:forEach var="favorite" items="${favorites}">
+                    <li class="list-group-item">
+                        <a class="up-favorite-remove float-end" data-portlet-id="${favorite.channelPublishId}" title="<spring:message code="remove.from.my.favorites" />" href="javascript:void(0);">
+                            <i class="fa fa-star" aria-hidden="true"></i>
+                        </a>
+                        <c:set var="favoriteAnchorContentTarget">
                             <c:choose>
-                                <c:when test="${not empty favorite.parameterMap['iconUrl']}">
-                                    <img src="${favorite.parameterMap['iconUrl']}" class="img-responsive" alt="Icon for ${favorite.name}" aria-hidden="true" />
-                                </c:when>
-                                <c:otherwise>
-                                    <i class="fa fa-picture-o" aria-hidden="true"></i>
-                                </c:otherwise>
+                                <c:when test="${not empty favorite.parameterMap['alternativeMaximizedLinkTarget']}">${favorite.parameterMap['alternativeMaximizedLinkTarget']}</c:when>
+                                <c:otherwise>_blank</c:otherwise>
                             </c:choose>
-                        </span>
-                        <c:out value="${favorite.name}" />
-                    </a>
-                </li>
-            </c:forEach>
-        </ul>
+                        </c:set>
+                        <c:set var="favoriteAnchorContent">
+                            <c:choose>
+                                <c:when test="${not empty favorite.parameterMap['alternativeMaximizedLink']}">href="${favorite.parameterMap['alternativeMaximizedLink']}" target="${favoriteAnchorContentTarget}" rel="noopener noreferrer"</c:when>
+                                <c:otherwise>href="${renderRequest.contextPath}/p/${favorite.functionalName}/render.uP"</c:otherwise>
+                            </c:choose>
+                        </c:set>
+                        <a ${favoriteAnchorContent}>
+                            <span class="favorites-icon">
+                                <c:choose>
+                                    <c:when test="${not empty favorite.parameterMap['iconUrl']}">
+                                        <img src="${favorite.parameterMap['iconUrl']}" class="img-fluid" alt="Icon for ${favorite.name}" aria-hidden="true" />
+                                    </c:when>
+                                    <c:otherwise>
+                                        <i class="fa fa-picture-o" aria-hidden="true"></i>
+                                    </c:otherwise>
+                                </c:choose>
+                            </span>
+                            <c:out value="${favorite.name}" />
+                        </a>
+                    </li>
+                </c:forEach>
+            </ul>
 
-        <%-- Display link to Marketplace if available, suppress otherwise --%>
-        <c:if test="${not empty marketplaceUrl}">
-            <span class="pull-right">
-                <a href="${marketplaceUrl}">
-                <spring:message code="favorites.invitation.to.marketplace.short" text="Visit Marketplace"/>
-                </a>
-            </span>
-        </c:if>
-    </div><!-- /.navbar-collapse -->
+            <%-- Display link to Marketplace if available, suppress otherwise --%>
+            <c:if test="${not empty marketplaceUrl}">
+                <span class="float-end">
+                    <a href="${marketplaceUrl}">
+                    <spring:message code="favorites.invitation.to.marketplace.short" text="Visit Marketplace"/>
+                    </a>
+                </span>
+            </c:if>
+        </div><!-- /.navbar-collapse -->
+    </div>
 </nav>
 
 <div class="up-favorite-info alert alert-info">
@@ -109,7 +106,7 @@
 
 <script type="text/javascript">
 (function($){
-    $('#${n} .up-favorite-remove').click({
+    $('#${n} .up-favorite-remove').on('click', {
         context : '${renderRequest.contextPath}'
     }, function(event) {
         event.data.portletId = $(this).attr('data-portlet-id');
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Favorites/view_zero.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Favorites/view_zero.jsp
index bb49cb44f9a..2ceef09c39d 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Favorites/view_zero.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Favorites/view_zero.jsp
@@ -41,7 +41,7 @@
   <%-- Display short link to Marketplace if available, suppress otherwise --%>
   <%-- Included even though redundant with link above, for consistency with UI when user has favorites. --%>
   <c:if test="${not empty marketplaceUrl}">
-    <span class="pull-right">
+    <span class="float-end">
       <a href="${marketplaceUrl}">
         <spring:message code="favorites.invitation.to.marketplace.short" text="Visit Marketplace"/>
       </a>
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/FragmentAdministration/index.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/FragmentAdministration/index.jsp
index f8af794aa96..372e987e7d2 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/FragmentAdministration/index.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/FragmentAdministration/index.jsp
@@ -21,22 +21,22 @@
 <%@ include file="/WEB-INF/jsp/include.jsp" %>
 
 <!-- Portlet -->
-<div id="portalFragAdminList" class="fl-widget portlet snooper view-main" role="section">
+<div id="portalFragAdminList" class="card portlet snooper view-main" role="section">
 
 	
     <!-- Portlet Titlebar -->
-    <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead">
+    <div class="card-header titlebar portlet-titlebar" role="sectionhead">
     	<h2 class="title" role="heading">Fragment Administration</h2>
     </div>
     
     <!-- Portlet Content -->
-	<div class="fl-widget-content content portlet-content">
+	<div class="card-body content portlet-content">
 
         <!-- Future version to use an unordered list and form submission via javascript.
         <form method="POST" id="fragmentAdminForm" name="fragmentAdminForm" action="<portlet:actionURL><portlet:param name="action" value="becomeFragmentOwner"/></portlet:actionURL>">
         	<input type="hidden" id="fragmentOwner" name="impersonateUser" />
         </form>
-        <ul class="fl-listmenu">
+        <ul class="nav nav-pills flex-column">
             <c:forEach items="${FRAGMENTS}" var="item">
             	<li><a id="${fn:escapeXml(item.key)}" href="#" title="Administer fragment ${fn:escapeXml(item.value)}"><span>${fn:escapeXml(item.value)}</span></a></li>
             </c:forEach>
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/GoogleAnalytics/config.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/GoogleAnalytics/config.jsp
index 1c8e61689ea..7c97f18d122 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/GoogleAnalytics/config.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/GoogleAnalytics/config.jsp
@@ -33,7 +33,7 @@
    <input name="propertyName" value="{{= name }}"/>
 
    <div>
-       <label>Property Id:</label><input name="propertyId" value="{{= propertyId }}"/>
+       <label class="form-label">Property Id:</label><input name="propertyId" value="{{= propertyId }}"/>
    </div>
    <div class="property-config">
    </div>
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/ImportExportPortlet/delete.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/ImportExportPortlet/delete.jsp
index d4dfc610241..8f272389917 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/ImportExportPortlet/delete.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/ImportExportPortlet/delete.jsp
@@ -21,10 +21,10 @@
 <%@ include file="/WEB-INF/jsp/include.jsp" %>
 
 <!-- Portlet -->
-<section class="fl-widget portlet imp-exp view-delete">
+<section class="card portlet imp-exp view-delete">
 
     <!-- Portlet Titlebar -->
-    <header class="fl-widget-titlebar titlebar portlet-titlebar">
+    <header class="card-header titlebar portlet-titlebar">
         <h2 class="title">
             <spring:message code="delete.portlet.entities"/>
         </h2>
@@ -47,7 +47,7 @@
     </div>
 
     <!-- Portlet Content -->
-    <div class="fl-widget-content content portlet-content">
+    <div class="card-body content portlet-content">
 
         <!-- Messages -->
         <div class="portlet-msg-error portlet-msg error alert alert-danger" role="alert">
@@ -73,7 +73,7 @@
         </div>
 
         <div class="portlet-form">
-            <form id="${n}form" class="form-inline" method="POST">
+            <form id="${n}form" class="d-flex align-items-center gap-2" method="POST">
                 <label class="portlet-form-label" for="entityType">
                     <spring:message code="type"/>:
                 </label>
@@ -106,7 +106,7 @@
     up.jQuery(document).ready(function () {
         var $ = up.jQuery;
 
-        $("#${n}form").submit(function () {
+        $("#${n}form").on('submit', function () {
            var form, entityType, sysId, href;
 
            form = this;
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/ImportExportPortlet/export.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/ImportExportPortlet/export.jsp
index 02ddd3095f4..76667313468 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/ImportExportPortlet/export.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/ImportExportPortlet/export.jsp
@@ -21,23 +21,23 @@
 <%@ include file="/WEB-INF/jsp/include.jsp" %>
 
 <!-- Portlet -->
-<section class="fl-widget portlet imp-exp view-export">
+<section class="card portlet imp-exp view-export">
 
     <!-- Portlet Titlebar -->
-    <header class="fl-widget-titlebar titlebar portlet-titlebar">
+    <header class="card-header titlebar portlet-titlebar">
         <h2 class="title">
             <spring:message code="export.portlet.entities"/>
         </h2>
         <nav class="toolbar">
             <ul class="btn-group">
                 <li class="btn"><a class="button btn btn-primary" href="<portlet:renderURL/>"><spring:message code="import"/> <i class="fa fa-upload"></i></a></li>
-                <li class="btn"><a class="button btn btn-default" href="<portlet:renderURL><portlet:param name="action" value="delete"/></portlet:renderURL>"><spring:message code="delete"/> <i class="fa fa-trash-o"></i></a></li>
+                <li class="btn"><a class="button btn btn-secondary" href="<portlet:renderURL><portlet:param name="action" value="delete"/></portlet:renderURL>"><spring:message code="delete"/> <i class="fa fa-trash-o"></i></a></li>
             </ul>
         </nav>
     </header>
 
     <!-- Portlet Content -->
-    <div class="fl-widget-content content portlet-content">
+    <div class="card-body content portlet-content">
 
         <!-- Note -->
         <aside class="portlet-note">
@@ -45,8 +45,8 @@
         </aside>
 
         <div class="portlet-form">
-            <form id="${n}form" method="POST" class="form-inline" action="javascript:;">
-                <div class="form-group">
+            <form id="${n}form" method="POST" class="d-flex align-items-center gap-3" action="javascript:;">
+                <div>
                     <label class="portlet-form-label" for="${n}entityType"><spring:message code="type"/>:</label>
                     <select id="${n}entityType" class="form-control" name="entityType">
                         <option>[<spring:message code="select.type"/>]</option>
@@ -55,11 +55,11 @@
                         </c:forEach>
                     </select>
                 </div>
-                <div class="form-group">
+                <div>
                     <label class="portlet-form-label" for="${n}sysid"><spring:message code="id"/>:</label>
                     <input type="text" id="${n}sysid" class="form-control" name="sysid"/>
                 </div>
-                <div class="form-group">
+                <div>
                     <div class="buttons">
                         <a id="${n}exportLink" class="button btn btn-primary" target="_blank" rel="noopener noreferrer" href=""><spring:message code="export"/> <i class="fa fa-download"></i></a>
                     </div>
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/ImportExportPortlet/import.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/ImportExportPortlet/import.jsp
index e6635c53305..d987e195d4a 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/ImportExportPortlet/import.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/ImportExportPortlet/import.jsp
@@ -21,7 +21,7 @@
 <%@ include file="/WEB-INF/jsp/include.jsp"%>
 
 <style type="text/css">
-    .fl-uploader-queue-footer td {
+    .uploader-queue-footer td {
         padding: 6px;
     }
 
@@ -29,10 +29,10 @@
 </style>
 
 <!-- Portlet -->
-<section class="fl-widget portlet imp-exp view-import">
+<section class="card portlet imp-exp view-import">
 
     <!-- Portlet Titlebar -->
-    <header class="fl-widget-titlebar titlebar portlet-titlebar">
+    <header class="card-header titlebar portlet-titlebar">
         <h2 class="title">
             <spring:message code="manage.portlet.entities"/>
         </h2>
@@ -45,7 +45,7 @@
                     </a>
                 </li>
                 <li class="btn">
-                    <a class="button btn btn-default" href="<portlet:renderURL><portlet:param name="action" value="delete"/></portlet:renderURL>">
+                    <a class="button btn btn-secondary" href="<portlet:renderURL><portlet:param name="action" value="delete"/></portlet:renderURL>">
                         <spring:message code="delete"/>
                         <i class="fa fa-trash-o"></i>
                     </a>
@@ -55,7 +55,7 @@
     </header>
 
     <!-- Portlet Content -->
-    <div class="fl-widget-content content portlet-content">
+    <div class="card-body content portlet-content">
 
         <h2 class="title">
             <spring:message code="upload.an.entity.to.be.imported"/>
@@ -63,97 +63,97 @@
         <div id="uploader-contents">
 
             <!-- This is the markup for the Fluid Uploader component itself. -->
-            <form class="flc-uploader fl-uploader"
+            <form class="uploader-form file-uploader"
                   method="get"
                   enctype="multipart/form-data">
 
                 <!-- The file queue -->
-                <div class="fl-uploader-queue-wrapper">
+                <div class="uploader-queue-wrapper">
                     <!-- Top of the queue -->
-                    <div class="fl-uploader-queue-header">
+                    <div class="uploader-queue-header">
                         <table  class="table" cellspacing="0" cellpadding="0" summary="Headers for the file queue." role="presentation">
                         </table>
                     </div>
 
                     <!-- Scrollable view -->
-                    <div class="flc-scroller fl-scroller">
-                        <div class="fl-scroller-inner">
-                            <table cellspacing="0" class="flc-uploader-queue fl-uploader-queue table table-condensed table-striped" summary="Queue of files to upload." role="presentation">
+                    <div class="overflow-auto">
+                        <div class="h-100">
+                            <table cellspacing="0" class="uploader-queue table table-sm table-striped" summary="Queue of files to upload." role="presentation">
                                 <thead>
                                 <tr>
-                                    <th scope="col" class="fl-uploader-file-name"><spring:message code="file.name"/></th>
-                                    <th scope="col" class="fl-uploader-file-size"><spring:message code="size"/></th>
-                                    <th scope="col" class="fl-uploader-file-actions"><spring:message code="actions"/></th>
+                                    <th scope="col" class="uploader-file-name"><spring:message code="file.name"/></th>
+                                    <th scope="col" class="uploader-file-size"><spring:message code="size"/></th>
+                                    <th scope="col" class="uploader-file-actions"><spring:message code="actions"/></th>
                                 </tr>
                                 </thead>
                                 <tbody>
                                     <!-- Rows will be rendered in here. -->
 
                                     <!-- Template markup for the file queue rows -->
-                                    <tr class="flc-uploader-file-tmplt flc-uploader-file fl-uploader-hidden-templates">
-                                        <th class="flc-uploader-file-name fl-uploader-file-name" scope="row">File Name Placeholder</th>
-                                        <td class="flc-uploader-file-size fl-uploader-file-size">0 KB</td>
-                                        <td class="fl-uploader-file-actions">
-                                            <button type="button" class="flc-uploader-file-action fl-uploader-file-action btn btn-default" tabindex="-1">
-                                                <span class="fl-uploader-button-text"><spring:message code="remove.from.queue"/></span> <i class="fa fa-close"></i>
+                                    <tr class="uploader-file-template uploader-file d-none">
+                                        <th class="uploader-file-name" scope="row">File Name Placeholder</th>
+                                        <td class="uploader-file-size">0 KB</td>
+                                        <td class="uploader-file-actions">
+                                            <button type="button" class="uploader-file-action btn btn-secondary" tabindex="-1">
+                                                <span class="uploader-button-text"><spring:message code="remove.from.queue"/></span> <i class="fa fa-close"></i>
                                             </button>
                                         </td>
                                     </tr>
 
                                     <!-- Template for the file error info rows -->
-                                    <tr class="flc-uploader-file-error-tmplt fl-uploader-file-error fl-uploader-hidden-templates bg-danger">
-                                        <td colspan="3" class="flc-uploader-file-error"></td>
+                                    <tr class="uploader-file-error-template uploader-file-error d-none table-danger">
+                                        <td colspan="3" class="uploader-file-error"></td>
                                     </tr>
                                 </tbody>
                             </table>
-                            <div class="flc-uploader-file-progressor-tmplt fl-uploader-file-progress">
-                                <span class="fl-uploader-file-progress-text fl-uploader-hidden">76%</span>
+                            <div class="uploader-file-progressor-template uploader-file-progress">
+                                <span class="uploader-file-progress-text d-none">76%</span>
                             </div>
                         </div>
                     </div>
 
-                    <div class="flc-uploader-browse-instructions fl-uploader-browse-instructions">
+                    <div class="uploader-browse-instructions">
                         <p>
                             <spring:message htmlEscape="false" code="choose.files"/>
                         </p>
                     </div>
 
                     <!-- Foot of the queue -->
-                    <div class="flc-uploader-queue-footer fl-uploader-queue-footer">
+                    <div class="uploader-queue-footer">
                         <table summary="Status of file queue." role="presentation">
                             <tr>
-                                <td class=".fl-uploader-footer-buttons">
-                                    <span class="flc-uploader-button-browse fl-uploader-browse"></span>
+                                <td class=".uploader-footer-buttons">
+                                    <span class="uploader-button-browse"></span>
                                 </td>
-                                <td class="flc-uploader-total-progress-text">
+                                <td class="uploader-total-progress-text">
                                     <p>Total: 0 files (0 KB)</p>
                                 </td>
                             </tr>
                         </table>
-                        <div class="flc-uploader-total-progress fl-uploader-total-progress-okay">&nbsp;</div>
-                        <div class="flc-uploader-errorsPanel fl-uploader-errorsPanel">
-                            <div class="fl-uploader-errorsPanel-header">
-                                <span class="flc-uploader-errorPanel-header">Warnings:</span>
+                        <div class="uploader-total-progress progress">&nbsp;</div>
+                        <div class="uploader-errors-panel alert alert-warning d-none">
+                            <div class="uploader-errors-panel-header">
+                                <span class="uploader-error-panel-header">Warnings:</span>
                             </div>
 
                             <!-- The markup for each error section will be rendered into these containers. -->
-                            <div class="flc-uploader-errorPanel-section-fileSize"></div>
-                            <div class="flc-uploader-errorPanel-section-numFiles"></div>
+                            <div class="uploader-error-panel-section-file-size"></div>
+                            <div class="uploader-error-panel-section-num-files"></div>
 
                             <!-- Error section template.-->
-                            <div class="flc-uploader-errorPanel-section-tmplt fl-uploader-hidden-templates">
-                                <div class="flc-uploader-errorPanel-section-title fl-uploader-errorPanel-section-title">
+                            <div class="uploader-error-panel-section-template d-none">
+                                <div class="uploader-error-panel-section-title">
                                     <p>x files were too y and were not added to the queue.</p>
                                 </div>
 
-                                <div class="flc-uploader-errorPanel-section-details fl-uploader-errorPanel-section-details">
+                                <div class="uploader-error-panel-section-details">
                                     <p>The following files were not added:</p>
-                                    <p class="flc-uploader-errorPanel-section-files">file_1, file_2, file_3, file_4, file_5 </p>
+                                    <p class="uploader-error-panel-section-files">file_1, file_2, file_3, file_4, file_5 </p>
                                 </div>
 
-                                <button type="button" class="flc-uploader-errorPanel-section-toggleDetails fl-uploader-errorPanel-section-toggleDetails btn btn-default">Hide this list <i class="fa fa-eye-slash"></i></button>
-                                <button type="button" class="flc-uploader-errorPanel-section-removeButton fl-uploader-errorPanel-section-removeButton btn btn-warning">
-                                    <span class="flc-uploader-erroredButton-text fl-uploader-hidden">Remove error <i class="fa fa-remove"></i></span>
+                                <button type="button" class="uploader-error-panel-section-toggle-details btn btn-secondary">Hide this list <i class="fa fa-eye-slash"></i></button>
+                                <button type="button" class="uploader-error-panel-section-remove-button btn btn-warning">
+                                    <span class="uploader-errored-button-text d-none">Remove error <i class="fa fa-remove"></i></span>
                                 </button>
                             </div>
                          </div>
@@ -161,18 +161,18 @@
                 </div>
 
                 <!-- Action buttons -->
-                <div class="fl-uploader-btns btn-inline-group">
-                    <button type="submit" class="flc-uploader-button-upload fl-uploader-upload fl-uploader-button-default fl-uploader-dim btn btn-success" disabled="disabled" onclick="return false;">
+                <div class="uploader-buttons btn-group">
+                    <button type="submit" class="uploader-button-upload btn btn-success opacity-50" disabled="disabled" onclick="return false;">
                         <spring:message code="import.button.submit.upload"/>
                         <i class="fa fa-upload"></i>
                     </button>
-                    <button type="button" class="flc-uploader-button-pause fl-uploader-pause fl-uploader-hidden btn btn-danger">
+                    <button type="button" class="uploader-button-pause d-none btn btn-danger">
                         <spring:message code="import.button.submit.stop.upload"/>
                                                 <i class="fa fa-stop"></i>
                     </button>
                 </div>
 
-                <div class="flc-uploader-status-region fl-offScreen-hidden"></div>
+                <div class="uploader-status-region visually-hidden"></div>
             </form>
         </div>
 
@@ -181,22 +181,8 @@
 
 <script type="text/javascript">
     up.jQuery(document).ready(function () {
-        var myUpload = up.fluid.uploader(".flc-uploader", {
-            strategy: {
-                type: "fluid.uploader.progressiveStrategy",
-                options: {
-                    // Special options for the Flash version of Uploader.
-                    flashSettings: {
-                        // This option points to the location of the SWFUpload Flash object that ships with Fluid Infusion.
-                        flashURL: "/ResourceServingWebapp/rs/fluid/1.3/lib/swfupload.swf",
-
-                        // This option points to the location of the Browse Files button used with Flash 10 clients.
-                        flashButtonImageURL: "infusion/components/uploader/images/browse.png"
-                    }
-                }
-            },
+        var myUpload = up.uploader(".uploader-form", {
             queueSettings: {
-                // Set the uploadURL to the URL for posting files to your server.
                 uploadURL: "<c:url value="/api/import"/>",
                 fileQueueLimit: 1
             }
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Invoker/gallery.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Invoker/gallery.jsp
index 358f0af3994..a8a7f1485da 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Invoker/gallery.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Invoker/gallery.jsp
@@ -21,8 +21,8 @@
 <%@ include file="/WEB-INF/jsp/include.jsp" %>
 
 <div class="up-gallery">
-    <div class="fl-fix fl-col-mixed fl-col-mixed2 gallery-inner" style="display:none">
-        <div class="fl-col-side fl-force-left menu-wrapper">
+    <div class="clearfix row row2 gallery-inner" style="display:none">
+        <div class="col-auto float-start menu-wrapper">
             <ul class="menu" role="menu">
                 <li class="add-content-link active" role="tab">
                     <a href="#"><span><spring:message code="add.stuff"/></span></a>
@@ -41,18 +41,16 @@
                 <a class="button"><span><spring:message code="im.done"/></span></a>
             </div-->
         </div>
-        <div class="fl-col-main content-wrapper" role="tabpanel">
-            <div class="fl-fix content">
-                <div class="fl-fix fl-col-mixed fl-col-mixed2 pane add-content">
-                    <div class="fl-col-fixed fl-force-left content-filters-wrapper">
+        <div class="col content-wrapper" role="tabpanel">
+            <div class="clearfix content">
+                <div class="clearfix row row2 pane add-content">
+                    <div class="col-auto float-start content-filters-wrapper">
                         <div class="categories-column active">
                             <h3 class="portlet-list-link"><span><spring:message code="stuff"/></span></h3>
                             <div class="categories-wrapper active">
                                <div class="portlet-search-view">
                                     <form class="portlet-search-form">
-                                        <label for="portletSearch"><spring:message code="search.stuff.add"/></label>
-                                        <input id="portletSearch" name="portletSearch" class="portlet-search-input" type="text" value="<spring:message code="search"/>" />
-                                        <input type="submit" value="<spring:message code="search"/>" class="portlet-search-submit"/>
+                                        <input id="portletSearch" name="portletSearch" class="portlet-search-input" type="text" placeholder="Search for stuff" />
                                     </form>
                                 </div>
                                 <div class="categories">
@@ -71,41 +69,41 @@
                             </div>
                         </div>
                     </div>
-                    <div class="content-results-wrapper fl-col-main">
+                    <div class="content-results-wrapper col">
                         <div class="column-inner">
-                            <div class="results-wrapper fl-col-mixed2">
-                                <div class="pager-column fl-col-side fl-force-right">
+                            <div class="results-wrapper row2">
+                                <div class="pager-column col-auto float-end">
                                     <div class="column-inner">
                                     </div>
                                 </div>
-                                <div class="results-column fl-col-main fl-fix">
-                                    <div class="results-wrapper portlet-results fl-col-mixed2">
-                                        <div class="pager-column fl-col-side fl-force-right">
+                                <div class="results-column col clearfix">
+                                    <div class="results-wrapper portlet-results row2">
+                                        <div class="pager-column col-auto float-end">
                                             <div class="column-inner">
-                                                <div class="pager flc-pager-top">
+                                                <div class="pager pager-top">
                                                     <!--Previous-->
-                                                    <div class="pager-button-up flc-pager-previous">
+                                                    <div class="pager-button-up pager-previous">
                                                         <a class="pager-button-up-inner" href="#">
                                                             <span><spring:message code="up"/></span>
                                                         </a>
                                                     </div>
                                                     <!--Pager Links-->
                                                     <div style="display:none">
-                                                        <ul class="fl-pager-links flc-pager-links" style="margin:0; display:inline">
-                                                            <li class="flc-pager-pageLink"><a href="#">1</a></li>
-                                                            <li class="flc-pager-pageLink-disabled">2</li>
-                                                            <li class="flc-pager-pageLink"><a href="#">3</a></li>
+                                                        <ul class="pagination-links pager-links" style="margin:0; display:inline">
+                                                            <li class="pager-pageLink"><a href="#">1</a></li>
+                                                            <li class="pager-pageLink-disabled">2</li>
+                                                            <li class="pager-pageLink"><a href="#">3</a></li>
                                                         </ul>
                                                     </div>
                                                     <!--Pagination-->
                                                     <div class="pager-pagination"></div>
                                                     <!--Pager Summary-->
                                                     <div style="display:none">
-                                                        <span class="flc-pager-summary"><spring:message code="show"/></span>
-                                                        <span><select class="pager-page-size flc-pager-page-size"></select></span>
+                                                        <span class="pager-summary"><spring:message code="show"/></span>
+                                                        <span><select class="pager-page-size pager-page-size"></select></span>
                                                     </div>
                                                     <!--Next-->
-                                                    <div class="pager-button-down flc-pager-next">
+                                                    <div class="pager-button-down pager-next">
                                                         <a class="pager-button-down-inner" href="#">
                                                             <span><spring:message code="down"/></span>
                                                         </a>
@@ -113,8 +111,8 @@
                                                 </div>
                                             </div>
                                         </div>
-                                        <div class="results-column fl-col-main ui-helper-clearfix">
-                                            <ul id="addContentPortletList" class="results-list portlet-list">
+                                        <div class="results-column col ui-helper-clearfix">
+                                            <ul id="addContentPortletList" class="results-list portlet-list modern-portlet-container">
                                                 <li class="result-item portlet">
                                                     <div class="ri-wrapper portlet-wrapper">
                                                         <a class="ri-utility portlet-thumb-gripper" href="#" title="<spring:message code="drag.to.add.content"/>"><span>Drag Handle</span></a>
@@ -141,16 +139,14 @@
                     <div class="content-modal content-loading"></div>
                 </div>
 
-                <div class="fl-fix fl-col-mixed fl-col-mixed2 use-content" style="display:none">
-                    <div class="fl-col-fixed fl-force-left content-filters-wrapper">
+                <div class="clearfix row row2 use-content" style="display:none">
+                    <div class="col-auto float-start content-filters-wrapper">
                         <div class="categories-column active">
                             <h3 class="portlet-list-link"><span><spring:message code="stuff"/></span></h3>
                             <div class="categories-wrapper active">
                                 <div class="portlet-search-view">
                                     <form class="portlet-search-form">
-                                        <div class="search">
-                                            <input class="portlet-search-input" type="text"/>
-                                        </div>
+                                        <input class="portlet-search-input" type="text" placeholder="Search for stuff" />
                                     </form>
                                 </div>
                                 <div class="categories">
@@ -169,41 +165,41 @@
                             </div>
                         </div>
                     </div>
-                    <div class="content-results-wrapper fl-col-main">
+                    <div class="content-results-wrapper col">
                         <div class="column-inner">
-                            <div class="results-wrapper fl-col-mixed2">
-                                <div class="pager-column fl-col-side fl-force-right">
+                            <div class="results-wrapper row2">
+                                <div class="pager-column col-auto float-end">
                                     <div class="column-inner">
                                     </div>
                                 </div>
-                                <div class="results-column fl-col-main fl-fix">
-                                    <div class="results-wrapper portlet-results fl-col-mixed2">
-                                        <div class="pager-column fl-col-side fl-force-right">
+                                <div class="results-column col clearfix">
+                                    <div class="results-wrapper portlet-results row2">
+                                        <div class="pager-column col-auto float-end">
                                             <div class="column-inner">
-                                                <div class="pager flc-pager-top">
+                                                <div class="pager pager-top">
                                                     <!--Previous-->
-                                                    <div class="pager-button-up flc-pager-previous">
+                                                    <div class="pager-button-up pager-previous">
                                                         <a class="pager-button-up-inner" href="#">
                                                             <span><spring:message code="up"/></span>
                                                         </a>
                                                     </div>
                                                     <!--Pager Links-->
                                                     <div style="display:none">
-                                                        <ul class="fl-pager-links flc-pager-links" style="margin:0; display:inline">
-                                                            <li class="flc-pager-pageLink"><a href="#">1</a></li>
-                                                            <li class="flc-pager-pageLink-disabled">2</li>
-                                                            <li class="flc-pager-pageLink"><a href="#">3</a></li>
+                                                        <ul class="pagination-links pager-links" style="margin:0; display:inline">
+                                                            <li class="pager-pageLink"><a href="#">1</a></li>
+                                                            <li class="pager-pageLink-disabled">2</li>
+                                                            <li class="pager-pageLink"><a href="#">3</a></li>
                                                         </ul>
                                                     </div>
                                                     <!--Pagination-->
                                                     <div class="pager-pagination"></div>
                                                     <!--Pager Summary-->
                                                     <div style="display:none">
-                                                        <span class="flc-pager-summary"><spring:message code="show"/></span>
-                                                        <span><select class="pager-page-size flc-pager-page-size"></select></span>
+                                                        <span class="pager-summary"><spring:message code="show"/></span>
+                                                        <span><select class="pager-page-size pager-page-size"></select></span>
                                                     </div>
                                                     <!--Next-->
-                                                    <div class="pager-button-down flc-pager-next">
+                                                    <div class="pager-button-down pager-next">
                                                         <a class="pager-button-down-inner" href="#">
                                                             <span><spring:message code="down"/></span>
                                                         </a>
@@ -211,8 +207,8 @@
                                                 </div>
                                             </div>
                                         </div>
-                                        <div class="results-column fl-col-main ui-helper-clearfix">
-                                            <ul id="useContentPortletList" class="results-list portlet-list">
+                                        <div class="results-column col ui-helper-clearfix">
+                                            <ul id="useContentPortletList" class="results-list portlet-list modern-portlet-container">
                                                 <li class="result-item portlet">
                                                     <div class="ri-wrapper portlet-wrapper">
                                                         <div class="ri-utility"></div>
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Invoker/greeting.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Invoker/greeting.jsp
index 21470d3308a..1bed86758f4 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Invoker/greeting.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Invoker/greeting.jsp
@@ -27,4 +27,4 @@
     </c:choose>
 </c:set>
 
-<div class="user-name"><span class="hidden-xs">${greeting}</span>&nbsp;${userInfo['displayName']}</div>
+<div class="user-name"><span class="d-none d-sm-inline">${greeting}</span>&nbsp;${userInfo['displayName']}</div>
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Invoker/login.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Invoker/login.jsp
index 83f11ffec52..0cdadb0ed79 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Invoker/login.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Invoker/login.jsp
@@ -21,19 +21,17 @@
 <%@ include file="/WEB-INF/jsp/include.jsp" %>
 <c:set var="request" value="${pageContext.request}" />
 
-<div id="webLoginContainer" class="fl-widget portal-login">
-  <div class="fl-widget-inner">
-    <div class="fl-widget-content">
-        <div id="portalCASLogin" class="fl-widget-content">
-            <a id="portalCASLoginLink" class="btn" title="<spring:message code="sign.in.via.cas"/>" href="${casRefUrlEncoder.getCasLoginUrl(request)}">
-                <i class="fa fa-sign-in" aria-hidden="true"></i>
-                <spring:message code="sign.in"/>
-            </a>
-            <a id="portalCASLoginNewLink" title="<spring:message code="create.new.portal.account"/>" href="http://www.jasig.org/cas" class="btn">
-                <i class="fa fa-user-plus" aria-hidden="true"></i>
-                <spring:message code="new.user.question"/>
-            </a>
-        </div>
+<div id="webLoginContainer" class="portal-login">
+  <div class="portal-login-inner">
+    <div id="portalCASLogin">
+        <a id="portalCASLoginLink" class="btn btn-primary" title="<spring:message code="sign.in.via.cas"/>" href="${casRefUrlEncoder.getCasLoginUrl(request)}">
+            <i class="fa fa-sign-in" aria-hidden="true"></i>
+            <spring:message code="sign.in"/>
+        </a>
+        <a id="portalCASLoginNewLink" title="<spring:message code="create.new.portal.account"/>" href="http://www.jasig.org/cas" class="btn btn-secondary">
+            <i class="fa fa-user-plus" aria-hidden="true"></i>
+            <spring:message code="new.user.question"/>
+        </a>
     </div>
   </div>
 </div>
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Invoker/logout.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Invoker/logout.jsp
index ce6a9536e36..0ba5ed4e364 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Invoker/logout.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Invoker/logout.jsp
@@ -20,7 +20,7 @@
 --%>
 <%@ include file="/WEB-INF/jsp/include.jsp" %>
 
-<a href="${portalLogoutUrl[0]}" title="<spring:message code="log.off.and.exit"/>" class="up-portlet-control hide-content portal-logout btn btn-link btn-xs">
+<a href="${portalLogoutUrl[0]}" title="<spring:message code="log.off.and.exit"/>" class="up-portlet-control hide-content portal-logout btn btn-link btn-sm">
     <i class="fa fa-sign-out" aria-hidden="true"></i>
     <spring:message code="sign.out"/>
 </a>
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Invoker/sitemap.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Invoker/sitemap.jsp
index a0d6cdbd9b5..1c5704e9f29 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Invoker/sitemap.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Invoker/sitemap.jsp
@@ -78,7 +78,6 @@
     }
 
     fetch('${layoutApiUrl}', {credentials: 'same-origin'})
-        // check for HTTP 2XX Okay response
         .then(function (response) {
             if (response.status >= 200 && response.status < 300) {
                 return response;
@@ -156,11 +155,8 @@
         })
         // Let user know and log error to browser console
         .catch(function(error) {
-            var errTemplate = document.getElementById('sitemap-tab-row-template');
-            var errDiv = document.importNode(errTemplate.content, true).querySelector('div');
-            errDiv.textContent = '${i18n_error_loading_sitemap}';
-            document.getElementById('sitemap-holder').appendChild(errDiv);
-            console.log('${i18n_error_loading_sitemap}', error);
+            // Silently fail - don't add error message to DOM or do anything that might trigger reload
+            console.error('Sitemap generation failed:', error.message);
         });
 
 })();
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Marketplace/portlet/entry.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Marketplace/portlet/entry.jsp
index 864dc81e9d8..557c1b7b645 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Marketplace/portlet/entry.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Marketplace/portlet/entry.jsp
@@ -145,7 +145,7 @@
         left:0;
     }
 
-    #${n} .marketplace_carousel_inner .item{
+    #${n} .marketplace_carousel_inner .carousel-item{
         height: 20em;
     }
 
@@ -169,7 +169,7 @@
         background-color: #333333;
     }
 
-    #${n} .btn.btn-default.disabled {
+    #${n} .btn.btn-secondary.disabled {
         background-color: #E0E0E0;
         opacity: 1;
     }
@@ -179,7 +179,7 @@
         padding: 20px 0;
     }
 
-    #${n} .marketplace_section .panel {
+    #${n} .marketplace_section .card {
         border: none;
         border-radius: 0;
         -webkit-border-radius: 0;
@@ -189,7 +189,7 @@
         -moz-box-shadoe: none;
     }
 
-    #${n} .marketplace_section .panel .portlet-box {
+    #${n} .marketplace_section .card .portlet-box {
         height: 112px;
         max-height: 112px;
         margin: 0;
@@ -204,22 +204,22 @@
         overflow: hidden;
     }
 
-    #${n} .marketplace_section .panel .portlet-box:hover {
+    #${n} .marketplace_section .card .portlet-box:hover {
         background-color: #eee;
         cursor: pointer;
     }
 
-    #${n} .marketplace_section .panel .portlet-box a {
+    #${n} .marketplace_section .card .portlet-box a {
         width: 100%;
         display: block;
     }
 
-    #${n} .marketplace_section .panel .portlet-box a:hover {
+    #${n} .marketplace_section .card .portlet-box a:hover {
         text-decoration: none;
         color: #000000;
     }
 
-    #${n} .marketplace_section .panel .portlet-box .portlet-icon {
+    #${n} .marketplace_section .card .portlet-box .portlet-icon {
         width: 92px;
         height: 92px;
         max-height: 92px;
@@ -230,25 +230,25 @@
         text-align: center;
     }
 
-    #${n} .marketplace_section .panel .portlet-box .portlet-icon img {
+    #${n} .marketplace_section .card .portlet-box .portlet-icon img {
         width: 72px;
         height: 72px;
         margin-top: 7px;
     }
 
-    #${n} .marketplace_section .panel .portlet-box .portlet-details {
+    #${n} .marketplace_section .card .portlet-box .portlet-details {
         text-align: left;
         color: #000;
         margin-right: 0;
     }
 
-    #${n} .marketplace_section .panel .portlet-box .portlet-details h5 {
+    #${n} .marketplace_section .card .portlet-box .portlet-details h5 {
         font-size: 16px;
         margin: 0 0 3px 0;
     }
 
 
-    #${n} .marketplace_section .panel .portlet-box .portlet-details p {
+    #${n} .marketplace_section .card .portlet-box .portlet-details p {
         font-size: 11px;
         margin: 0;
     }
@@ -274,16 +274,15 @@
 
 <script type="text/template" id="${n}options-menu">
     <li role="menuitem">
-        <a href="#" title='<spring:message code="link.to" text="Link to ..." />' data-toggle="modal" data-target="#${n}copy-modal" id="${n}linkto">
+        <a class="dropdown-item" href="#" title='<spring:message code="link.to" text="Link to ..." />' data-bs-toggle="modal" data-bs-target="#${n}copy-modal" id="${n}linkto">
             <spring:message code="link.to" text="Link to ..."/>
         </a>
     </li>
-    <li aria-hidden="true" class="divider"></li>
+    <li aria-hidden="true" class="dropdown-divider"></li>
     {% if (canFavorite) { %}
     <li role="menuitem">
         <spring:message code="add.this.portlet.to.my.favorite" text="Add this Portlet to My Favorites" var="atptmfTitle"/>
-        <a href="#" title="${atptmfTitle}"
-                class="{% if (isFavorite) { print('marketplace_remove_favorite'); } else { print('marketplace_add_favorite'); } %}">
+        <a class="dropdown-item {% if (isFavorite) { print('marketplace_remove_favorite'); } else { print('marketplace_add_favorite'); } %}" href="#" title="${atptmfTitle}">
             {% if (isFavorite) { %}
                 <i class="fa fa-star"></i>
             {% } else { %}
@@ -296,7 +295,7 @@
     </li>
     {% } %}
     <li role="menuitem">
-        <a href="javascript://" aria-disabled="true" disabled>
+        <a class="dropdown-item" href="javascript://" aria-disabled="true" disabled>
                 <span>
                     <spring:message code="marketplace.add.to.tab" text="Add portlet to tab:"/>
                 </span>
@@ -304,7 +303,7 @@
     </li>
     {% _.each(tabs, function(tab) { %}
         <li role="menuitem">
-            <a href="#" class="marketplace_add_to_tab_link" data-tab-id="{%= tab.id %}">
+            <a class="dropdown-item marketplace_add_to_tab_link" href="#" data-tab-id="{%= tab.id %}">
                 <span>
                     {%- tab.name %}
                 </span>
@@ -323,12 +322,12 @@
             </div>
         </div>
         <div class="row">
-            <div class="col-md-offset-3 col-xs-6">
+            <div class="offset-md-3 col-6">
                 <div class="carousel-container">
                     <div id="${n}marketplace_screenshots_and_videos" class="carousel slide" data-ride="carousel" data-interval="9000" data-wrap="true">
                         <div class="carousel-inner marketplace_carousel_inner" role="listbox">
                             {% _(screenShots).each(function(screen, idx) { %}
-                                <div class="item marketplace_screen_shots {% if (idx === 0) { %} active {% } %}">
+                                <div class="carousel-item marketplace_screen_shots {% if (idx === 0) { %} active {% } %}">
                                     <img src="{%= screen.url %}" alt="screenshot for portlet">
                                         {% _(screen.captions).each(function(caption) { %}
                                             <div class="carousel-caption">
@@ -342,14 +341,16 @@
                         {% if (screenShots.length > 1) { %}
                             <ol class="carousel-indicators marketplace_carousel_indicators">
                                 {% _(screenShots).each(function(screen, idx) { %}
-                                    <li data-target="#${n}marketplace_screenshots_and_videos" data-slide-to="{%= idx %}"></li>
+                                    <li data-bs-target="#${n}marketplace_screenshots_and_videos" data-bs-slide-to="{%= idx %}"></li>
                                 {% }); %}
                             </ol>
-                            <a class="left carousel-control carousel-marketplace-control" href="#${n}marketplace_screenshots_and_videos" role="button" data-slide="prev">
-                                <span class="glyphicon glyphicon-chevron-left"></span>
+                            <a class="carousel-control-prev carousel-marketplace-control" href="#${n}marketplace_screenshots_and_videos" role="button" data-slide="prev">
+                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                                <span class="visually-hidden">Previous</span>
                             </a>
-                            <a class="right carousel-control carousel-marketplace-control" href="#${n}marketplace_screenshots_and_videos" role="button" data-slide="next">
-                                <span class="glyphicon glyphicon-chevron-right"></span>
+                            <a class="carousel-control-next carousel-marketplace-control" href="#${n}marketplace_screenshots_and_videos" role="button" data-slide="next">
+                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                                <span class="visually-hidden">Next</span>
                             </a>
                         {% } %}
                     </div>
@@ -360,21 +361,20 @@
 </script>
 
 <div id="${n}">
-    <div class="col-xs-12">
+    <div class="col-12">
         <div class="row">
-            <div class="col-xs-6">
+            <div class="col-6">
                 <portlet:renderURL var="initialViewURL" windowState="MAXIMIZED"/>
-                <a class="btn btn-default" href="${initialViewURL}"><i class="fa fa-arrow-left"></i> <spring:message code="back.to.list" text="Back to List"/></a>
+                <a class="btn btn-secondary" href="${initialViewURL}"><i class="fa fa-arrow-left"></i> <spring:message code="back.to.list" text="Back to List"/></a>
             </div>
-            <div class="col-xs-6" class="${n}go_button">
+            <div class="col-6" class="${n}go_button">
                 <div class="btn-group marketplace_button_group" style="float:right">
                     <a href="${marketplaceEntry.renderUrl}" id="marketplace_go_button"
-                       class="btn btn-default marketplace_dropdown_button" role="button">
+                       class="btn btn-secondary marketplace_dropdown_button" role="button">
                         <spring:message code="go" text="Go"/>
                     </a>
-                    <button type="button" class="btn btn-default dropdown-toggle marketplace_dropdown_button" data-toggle="dropdown">
+                    <button type="button" class="btn btn-secondary dropdown-toggle marketplace_dropdown_button" data-bs-toggle="dropdown">
                         <spring:message code="options" text="Options"/>
-                        <span class="caret"></span>
                     </button>
                     <ul class="dropdown-menu marketplace_dropdown_menu" role="menu" style="right: 0; left: auto;">
                     </ul>
@@ -382,7 +382,7 @@
             </div>
         </div>
         <div class="row header-info-wrapper">
-            <div class="col-sm-1 col-xs-4 header-img">
+            <div class="col-sm-1 col-4 header-img">
                 <c:url value="/media/skins/icons/mobile/default.png" var="defaultIcon"/>
                     <c:choose>
                         <c:when test="${empty marketplaceEntry.getParameter('mobileIconUrl')}">
@@ -393,7 +393,7 @@
                         </c:otherwise>
                 </c:choose>
             </div>
-            <div class="col-sm-11 col-xs-8">
+            <div class="col-sm-11 col-8">
                 <div class="marketplace_description_title">
                     <h1>${marketplaceEntry.title}</h1>
                 </div>
@@ -406,11 +406,11 @@
             <div class="col-sm-12 screen-shot-section"></div>
         </div>
         <div class="row">
-            <div class="col-xs-12">
+            <div class="col-12">
                 <h1>
                     <spring:message code="rating.and.review.cap" text="Ratings &amp; Reviews"/>
                 </h1>
-                <div class="col-xs-3 marketplace_average_rating">
+                <div class="col-3 marketplace_average_rating">
                     <fieldset class="rating-readonly">
                         <input
                             name="overallrating"
@@ -484,7 +484,7 @@
                         </label>
                     </fieldset>
                 </div>
-                <div id="col-xs-9 marketplace_users_rated">
+                <div id="col-9 marketplace_users_rated">
                     <span id="marketplace_average_rating_description">
                         (${marketplaceEntry.userRated} reviews)
                     </span>
@@ -492,10 +492,10 @@
             </div>
         </div>
         <div class="row">
-            <div class="col-xs-12">
+            <div class="col-12">
                 <div class="marketplace_user_rating">
                     <h4><spring:message code="rate.this.portlet" text="Rate this portlet"/></h4>
-                    <div id="${n}marketplace_rating_instructions" class="help-block"></div>
+                    <div id="${n}marketplace_rating_instructions" class="form-text"></div>
                     <form id="${n}save_rating_form">
                         <fieldset class="rating">
                             <input
@@ -564,14 +564,14 @@
                             </label>
                         </fieldset>
                         <c:if test="${enableReviews}">
-                        <div class="form-group">
-                            <label for="${n}marketplace_user_review_input" id="review-label"><spring:message code="rating.leave.review"/></label>
-                            <textarea id="${n}marketplace_user_review_input" aria-labelledby="review-label" name="review" class="form-control col-xs-12 col-med-6" rows="3"></textarea>
+                        <div class="row mb-3">
+                            <label for="${n}marketplace_user_review_input" id="review-label" class="form-label"><spring:message code="rating.leave.review"/></label>
+                            <textarea id="${n}marketplace_user_review_input" aria-labelledby="review-label" name="review" class="form-control col-12 col-med-6" rows="3"></textarea>
                             <div id="${n}input_chars_remaining"></div>
                         </div>
                         </c:if>
-                        <div class="form-group">
-                            <button id="${n}marketplace_user_rating_submit_button" type="submit" class="btn btn-default">
+                        <div class="row mb-3">
+                            <button id="${n}marketplace_user_rating_submit_button" type="submit" class="btn btn-secondary">
                                 <spring:message code="submit" text="Submit"/>
                             </button>
                         </div>
@@ -583,7 +583,7 @@
         </div>
         <c:if test="${not empty  marketplaceEntry.portletReleaseNotes.releaseNotes}">
             <div class="row clearfix">
-                <div class = "col-xs-12 col-md-4">
+                <div class = "col-12 col-md-4">
                     <br>
                     <p>
                         <span class="marketplace_section_header"><spring:message code="whats.new" text="What's New"/></span>
@@ -623,7 +623,7 @@
                         <portlet:param name="fName" value="${relatedPortlet.fname}"/>
                     </portlet:renderURL>
                     <div class="col-sm-6 col-lg-3">
-                        <div class="panel panel-default">
+                        <div class="card">
                             <div class="row portlet-box">
                                 <a href="${entryURL}">
                                     <div class="portlet-icon">
@@ -653,7 +653,7 @@
         <c:set var="portletCategories" value="${marketplaceEntry.categories}"/>
         <c:if test="${not empty portletCategories}">
             <div class="row">
-            <div class = "col-xs-12 col-md-4">
+            <div class = "col-12 col-md-4">
                 <span class="marketplace_section_header"><spring:message code="categories" text="CATEGORIES" /></span>
                 <ul>
                     <c:forEach var="portletCategory" items="${portletCategories}">
@@ -667,12 +667,12 @@
             </div>
             <br>
         </c:if>
-        <div class="row col-xs-12" style="clear:both;">
-            <div class="col-xs-4">
+        <div class="row col-12" style="clear:both;">
+            <div class="col-4">
             </div>
-            <div class="col-xs-4">
+            <div class="col-4">
             </div>
-            <div class="col-xs-4" style="float:left">
+            <div class="col-4" style="float:left">
 
             </div>
         </div>
@@ -681,23 +681,26 @@
 <div class="modal fade" id="${n}copy-modal" tabindex="-1" role="dialog" aria-labelledby="LinkToModal" aria-modal="true">
     <div class="modal-dialog" style="text-align:center">
         <div class="modal-content" style="white-space: nowrap">
-            <h4 id="LinkToModal" class="modal-title">
-                <strong>
-                    <spring:message code="link.to.this" text="Link to This"/>
-                </strong>
-            </h4>
+            <div class="modal-header">
+                <h4 id="LinkToModal" class="modal-title">
+                    <strong>
+                        <spring:message code="link.to.this" text="Link to This"/>
+                    </strong>
+                </h4>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
             <div class="modal-body">
-                <form class="form-horizontal" role="form">
-                <div class="form-group">
-                    <label for="inputDeep" class="col-sm-2 control-label"><spring:message code="link" text="Link"/></label>
+                <form class="" role="form">
+                <div class="row mb-3">
+                    <label for="inputDeep" class="col-sm-2 col-form-label"><spring:message code="link" text="Link"/></label>
                     <div class="col-sm-10">
                         <input tabindex="0" type="text" class="form-control" id="inputDeep"
                                value="${marketplaceEntry.renderUrl}"></input>
                     </div>
                 </div>
                 <c:if test="${not empty shortURL }">
-                    <div class="form-group">
-                        <label for="smallLink" class="col-sm-2 control-label"><spring:message code="shortLink" text="Short Link"/></label>
+                    <div class="row mb-3">
+                        <label for="smallLink" class="col-sm-2 col-form-label"><spring:message code="shortLink" text="Short Link"/></label>
                         <div class="col-sm-10">
                             <input tabindex="0" type="text" class="form-control" id="smallLink" value="${shortURL}"></input>
                         </div>
@@ -706,7 +709,7 @@
                 </form>
             </div>
             <div class="modal-footer">
-                <button tabindex="0" role="button" type="button" class="btn btn-default" data-dismiss="modal"><spring:message code="close" text="Close"/></button>
+                <button tabindex="0" role="button" type="button" class="btn btn-secondary" data-bs-dismiss="modal"><spring:message code="close" text="Close"/></button>
             </div>
         </div>
     </div>
@@ -718,7 +721,7 @@
 
 <script type="text/javascript">
 (function($, Backbone, _) {
-    $(document).ready( function () {
+    $(function () {
         // IMPORTANT: The tabs object is not a true model so it won't do
         // notifications on change.  If tabs needs to change, replace the
         // entire object, don't modify the one in this model.
@@ -789,7 +792,7 @@
                     dataType: 'json'
                 });
 
-                promise.success(function() {
+                promise.done(function() {
                     <spring:message code="success" text="Success" var="success"/>
                     <spring:message code="marketplace.add.portlet.success"
                             text="{0} Portlet has been added to tab {1}"
@@ -805,7 +808,7 @@
                     });
                 });
 
-                promise.error(function() {
+                promise.fail(function() {
                     <spring:message code="marketplace.add.portlet.error"
                             text="Portlet could not be added to tab {0}"
                             htmlEscape="false"
@@ -1027,7 +1030,7 @@
             e.innerHTML = input;
             return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
         };
-        if($("input[name=rating][type=radio]:checked").size() > 0) {
+        if($("input[name=rating][type=radio]:checked").length > 0) {
             updateRatingInstructions('<spring:message code="rating.instructions.rated"
             text='You have already rated "{0}"; adjust your rating if you wish.'
             arguments="${marketplaceEntry.title}"
@@ -1071,12 +1074,20 @@
         </c:if>
 
         // Submit function
-        $("#${n}save_rating_form").submit(function (e) {
+        $("#${n}save_rating_form").on('submit', function (e) {
+            e.preventDefault();
+            var ratingVal = $("input[name=rating][type=radio]:checked").val();
+            if (!ratingVal) {
+                updateRatingInstructions('<spring:message code="rating.instructions.select"
+                text="Please select a star rating before submitting."
+                htmlEscape="true" />');
+                return;
+            }
             var reviewText = $("#${n}marketplace_user_review_input").val();
             $.ajax({
                 url: '${saveRatingUrl}',
                 data: {
-                    rating: $("input[name=rating][type=radio]:checked").val(),
+                    rating: ratingVal,
                     portletFName: "${marketplaceEntry.fname}",
                     review: reviewText ? reviewText.trim() : ''
                 },
@@ -1101,7 +1112,6 @@
                     });
                 }
             });
-            e.preventDefault();
         });
     });
 
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Marketplace/portlet/view.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Marketplace/portlet/view.jsp
index 5f020efd691..57858588afa 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Marketplace/portlet/view.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Marketplace/portlet/view.jsp
@@ -215,12 +215,12 @@
     padding-top: 1em;
 }
 
-#${n}marketplace .marketplaceSection .panel {
+#${n}marketplace .marketplaceSection .card {
     padding: 0;
     border: none;
 }
 
-#${n}marketplace .marketplaceSection .panel .portlet-box {
+#${n}marketplace .marketplaceSection .card .portlet-box {
     height: 112px;
     max-height: 112px;
     margin: 0;
@@ -235,22 +235,22 @@
     overflow: hidden;
 }
 
-#${n}marketplace .marketplaceSection .panel .portlet-box:hover {
+#${n}marketplace .marketplaceSection .card .portlet-box:hover {
     background-color: #eee;
     cursor: pointer;
 }
 
-#${n}marketplace .marketplaceSection .panel .portlet-box a {
+#${n}marketplace .marketplaceSection .card .portlet-box a {
     width: 100%;
     display: block;
 }
 
-#${n}marketplace .marketplaceSection .panel .portlet-box a:hover {
+#${n}marketplace .marketplaceSection .card .portlet-box a:hover {
     text-decoration: none;
     color: #000000;
 }
 
-#${n}marketplace .marketplaceSection .panel .portlet-box .portlet-icon {
+#${n}marketplace .marketplaceSection .card .portlet-box .portlet-icon {
     width: 92px;
     height: 92px;
     max-height: 92px;
@@ -261,26 +261,26 @@
     text-align: center;
 }
 
-#${n}marketplace .marketplaceSection .panel .portlet-box .portlet-icon img {
+#${n}marketplace .marketplaceSection .card .portlet-box .portlet-icon img {
     width: 72px;
     height: 72px;
     margin-top: 7px;
 
 }
 
-#${n}marketplace .marketplaceSection .panel .portlet-box .portlet-details {
+#${n}marketplace .marketplaceSection .card .portlet-box .portlet-details {
     text-align: left;
     color: #000;
     margin-right: 0;
 }
 
-#${n}marketplace .marketplaceSection .panel .portlet-box .portlet-details h5 {
+#${n}marketplace .marketplaceSection .card .portlet-box .portlet-details h5 {
     font-size: 16px;
     margin: 0 0 3px 0;
 }
 
 
-#${n}marketplace .marketplaceSection .panel .portlet-box .portlet-details p {
+#${n}marketplace .marketplaceSection .card .portlet-box .portlet-details p {
     font-size: 11px;
     margin: 0;
 }
@@ -307,7 +307,7 @@
                     <portlet:param name="fName" value="${featuredPortlet.fname}"/>
                 </portlet:renderURL>
                 <div class="col-sm-6 col-lg-3">
-                    <div class="panel panel-default">
+                    <div class="card">
                         <div class="row portlet-box">
                             <a href="${entryURL}">
                                 <div class="portlet-icon">
@@ -348,12 +348,12 @@
         </div>
         <div class="col-sm-8">
             <div class="sort_buttons_group">
-                <button type="button" id="${n}alphabetical-sort-button" class="btn btn-default">
+                <button type="button" id="${n}alphabetical-sort-button" class="btn btn-secondary">
                     <spring:message code="marketplace.azIndex" />
                 </button>
                 <!-- Offer Browse By: Category (but only if there are categories in the list) -->
                 <c:if test="${not empty categoryList}">
-                    <button type="button" id="${n}category-sort-button" class="btn btn-default">
+                    <button type="button" id="${n}category-sort-button" class="btn btn-secondary">
                         <spring:message code="marketplace.categories" />
                     </button>
                 </c:if>
@@ -362,26 +362,24 @@
         <div class="col-sm-3">
             <div class="input-group">
                 <input type="search" class="form-control" id="${n}portletTable_filter" placeholder="<spring:message code="marketplace.searchPortlets"/>" aria-label="<spring:message code="marketplace.searchPortlets"/>">
-                <span class="input-group-btn">
-                    <button class="btn btn-default" id="${n}clear_filter_button" aria-controls="${n}portletTable_filter">
-                        <spring:message code="marketplace.clear" />
-                    </button>
-                </span>
+                <button class="btn btn-secondary" id="${n}clear_filter_button" aria-controls="${n}portletTable_filter">
+                    <spring:message code="marketplace.clear" />
+                </button>
             </div>
         </div>
     </div>
 </div>
 
 
-<div id="${n}categoryListContainer" class="marketplace_center_text panel panel-default" style="display:none">
-    <div class="panel-body">
+<div id="${n}categoryListContainer" class="marketplace_center_text card" style="display:none">
+    <div class="card-body">
         <c:set var="categoryCount" value="0" />
         <c:forEach var="category" items="${categoryList}">
             <c:if test="${categoryCount mod 4 == 0}">
                 <div class="row">
-                    <div class="col-xs-0 col-md-2"></div>
+                    <div class="col-0 col-md-2"></div>
             </c:if>
-            <div class="col-xs-6 col-sm-3 col-md-2">
+            <div class="col-6 col-sm-3 col-md-2">
                 <a class="${n}marketplace_category_link">
                     ${category.name}
                 </a>
@@ -450,7 +448,7 @@
     var $ = up.jQuery;
     (function($) {
         up.jQuery(function() {
-        $(document).ready(function() {
+        $(function() {
 
             var trim11 =function(str) {
                 str = str.replace(/^\s+/, '');
@@ -485,9 +483,9 @@
                        applyEllipsis(nRow,0,75);
                       },
                 "sDom": '<rt'+
-                    '<"row ${n}bottom" <"col-xs-6 col-sm-8 col-md-3" i>'+
-                    '<"col-xs-6 col-md-push-6 col-sm-4 col-md-3"l>'+
-                    '<"col-xs-12 col-md-pull-3 col-md-6"p>>',
+                    '<"row ${n}bottom" <"col-6 col-sm-8 col-md-3" i>'+
+                    '<"col-6 col-sm-4 col-md-3 order-md-2"l>'+
+                    '<"col-12 col-md-6 order-md-1"p>>',
                 "bStateSave": false,
                 "bAutoWidth":false
             });
@@ -530,7 +528,7 @@
                 $("#${n}alphabetical-sort-button").removeClass("active");
             } 
 
-            $(".${n}marketplace_category_link").click(function(){
+            $(".${n}marketplace_category_link").on('click', function(){
                 setFilter(this.textContent);
                 clearKeywordFilter();
             });
@@ -538,14 +536,14 @@
             disableCategoriesWidgets();
             enableAZIndexWidgets();
 
-            $("#${n}alphabetical-sort-button").click(function(){
+            $("#${n}alphabetical-sort-button").on('click', function(){
                 disableCategoriesWidgets();
                 enableAZIndexWidgets();
                 clearFilter();
                 sortColumns(0);
             });
 
-            $("#${n}category-sort-button").click(function(){
+            $("#${n}category-sort-button").on('click', function(){
                 disableAZIndexWidgets();
                 enableCategoriesWidgets();
             });
@@ -556,7 +554,7 @@
                 setFilter(this.value);
             });
 
-            $("#${n}clear_filter_button").click(function(){
+            $("#${n}clear_filter_button").on('click', function(){
                 disableCategoriesWidgets();
                 enableAZIndexWidgets();
                 clearFilter();						
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/PopularPortlets/listPortlets.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/PopularPortlets/listPortlets.jsp
index 8cd8252dd71..ce4185af7c7 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/PopularPortlets/listPortlets.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/PopularPortlets/listPortlets.jsp
@@ -83,23 +83,23 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
 | the user interface of this portlet
 | including HTML, CSS, JavaScript, accessibilty,
 | naming conventions, 3rd Party libraries
-| (like jQuery and the Fluid Skinning System)
+| (like jQuery and Bootstrap)
 | and more, refer to:
 | docs/SKINNING_UPORTAL.md
 -->
 
 <!-- Portlet -->
-<div id="${n}portletBrowser" class="fl-widget portlet" role="section">
+<div id="${n}portletBrowser" class="card portlet" role="section">
 <form id="${n}form">
 
   <!-- Portlet Title -->
-  <div class="fl-widget-titlebar portlet-title" role="sectionhead">
+  <div class="card-header portlet-title" role="sectionhead">
     <h2 role="heading"><spring:message code="most.frequently.added"/></h2>
   </div> <!-- end: portlet-title -->
 
   <!-- Portlet Toolbar -->
   <div class="portlet-toolbar" role="toolbar">
-    <label for="${n}days">
+    <label for="${n}days" class="form-label">
       <spring:message code="previous"/>
     </label>
     <select id="${n}days" name="days">
@@ -112,10 +112,10 @@ PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
   </div> <!-- end: portlet-toolbar -->
 
     <!-- Portlet Body -->
-  <div class="fl-widget-content portlet-body">
+  <div class="card-body portlet-body">
 
     <!-- Portlet Section -->
-    <div id="${n}popularPortlets" class="portlet-section fl-pager" role="region">
+    <div id="${n}popularPortlets" class="portlet-section pagination" role="region">
 
       <div class="portlet-section-body">
         <table id="${n}portletsTable" style="width:100%;">
@@ -233,9 +233,14 @@ up.jQuery(function() {
                 $('td:eq(0)', nRow).html( getDeepLinkAnchorTag(aData.portletFName, aData.portletDescription, aData.portletTitle) );
             },
             // Setting the top and bottom controls
-            sDom: 'r<"row alert alert-info view-filter"<"toolbar-filter"><W><"toolbar-br"><"dataTables-inline dataTables-left"p><"dataTables-inline dataTables-left"i><"dataTables-inline dataTables-left"l>><"row"<"span12"t>>>',
-            // Filtering
-            oColumnFilterWidgets: { }
+            sDom: 'r<"row alert alert-info view-filter"<"toolbar-filter"><P><"toolbar-br"><"dataTables-inline dataTables-left"p><"dataTables-inline dataTables-left"i><"dataTables-inline dataTables-left"l>><"row"<"span12"t>>>',
+            // SearchPanes configuration (modern replacement for ColumnFilterWidgets)
+            searchPanes: {
+                columns: [0, 1], // Title and Times columns
+                cascadePanes: true,
+                viewTotal: true,
+                layout: 'columns-2'
+            }
         });
     };
 
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/PortletError/detailed.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/PortletError/detailed.jsp
index 83d10935693..9ea9ef4217f 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/PortletError/detailed.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/PortletError/detailed.jsp
@@ -21,20 +21,20 @@
 <%@ include file="/WEB-INF/jsp/include.jsp"%>
 <c:set var="n"><portlet:namespace/>-${portletWindowId}-</c:set>
 
-<div id="${n}" class="fl-widget portlet error view-detailed" role="section">
+<div id="${n}" class="card portlet error view-detailed" role="section">
 
-    <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead">
+    <div class="card-header titlebar portlet-titlebar" role="sectionhead">
         <p><spring:message code="errorportlet.main"/></p>
         <div class="breadcrumb">
             <portlet:actionURL var="userResetUrl">
                 <portlet:param name="failedPortletWindowId" value="${ portletWindowId.stringId}"/>
             </portlet:actionURL>
-            <span class="breadcrumb-1"><a href="${ adminRetryUrl }"><spring:message code="errorportlet.retry"/></a></span>
-            <span class="breadcrumb-2"><a data-href="${ userResetUrl }" href="javascript:void(0)"><spring:message code="errorportlet.reset"/> (User Facing)</a></span>
+            <span class="breadcrumb-item breadcrumb-1"><a href="${ adminRetryUrl }"><spring:message code="errorportlet.retry"/></a></span>
+            <span class="breadcrumb-item breadcrumb-2"><a data-href="${ userResetUrl }" href="javascript:void(0)"><spring:message code="errorportlet.reset"/> (User Facing)</a></span>
         </div> <!-- end breadcrumbs -->
     </div> <!-- end section head -->
 
-    <div class="fl-widget-content fl-fix up-portlet-content-wrapper">
+    <div class="card-body clearfix up-portlet-content-wrapper">
         <ul>
             <li>Portlet Window ID: ${fn:escapeXml(portletWindowId)}</li>
             <li>Channel Definition Name: ${fn:escapeXml(channelDefinition.name)}</li>
@@ -53,7 +53,7 @@
 <script type="text/javascript">
 (function($) {
 
-    $(document).ready(function(){
+    $(function(){
     	up.showHideToggle('#${n}stacktracecontainer', {
         	showmessage: '<spring:message code="errorportlet.toggleshow" htmlEscape="false" javaScriptEscape="true"/>',
         	hidemessage: '<spring:message code="errorportlet.togglehide" htmlEscape="false" javaScriptEscape="true"/>'
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/PortletError/generic.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/PortletError/generic.jsp
index c16eaa968ae..a620eff85eb 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/PortletError/generic.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/PortletError/generic.jsp
@@ -21,16 +21,16 @@
 <%@ include file="/WEB-INF/jsp/include.jsp"%>
 <c:set var="n"><portlet:namespace/></c:set>
 
-<div id="${n}" class="fl-widget portlet error view-detailed" role="section">
+<div id="${n}" class="card portlet error view-detailed" role="section">
 
-    <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead">
+    <div class="card-header titlebar portlet-titlebar" role="sectionhead">
         <p><spring:message code="errorportlet.main"/></p>
 
         <div class="breadcrumb">
             <portlet:actionURL var="userResetUrl">
                 <portlet:param name="failedPortletWindowId" value="${ portletWindowId.stringId}"/>
             </portlet:actionURL>
-            <span class="breadcrumb-1"><a data-href="${ userResetUrl }" href="javascript:void(0)"><spring:message code="errorportlet.reset"/></a></span>
+            <span class="breadcrumb-item breadcrumb-1"><a data-href="${ userResetUrl }" href="javascript:void(0)"><spring:message code="errorportlet.reset"/></a></span>
         </div> <!-- end breadcrumbs -->
 
     </div> <!-- end sectionhead -->
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/PortletError/maintenance.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/PortletError/maintenance.jsp
index b191e391dfa..63d6c7c1117 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/PortletError/maintenance.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/PortletError/maintenance.jsp
@@ -20,7 +20,7 @@
 --%>
 <%@ include file="/WEB-INF/jsp/include.jsp"%>
 
-<div class="jumbotron">
+<div class="bg-light p-5 rounded-3">
   <h2 class="text-warning" style="font-size: 200%;">
     <i class="fa fa-exclamation-circle"></i>
     <spring:message code="errorportlet.maintenance.title"/>
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Search/search.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Search/search.jsp
index 5328da74b70..b2230fe2f64 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Search/search.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Search/search.jsp
@@ -26,27 +26,25 @@
 <c:set var="n"><portlet:namespace/></c:set>
 
 <!-- Portlet -->
-<div class="fl-widget portlet search-portlet" role="section">
+<div class="card portlet search-portlet" role="section">
 
     <!-- Portlet Titlebar
-        <div class="fl-widget-titlebar titlebar portlet-titlebar" role="sectionhead">
+        <div class="card-header titlebar portlet-titlebar" role="sectionhead">
         <h2 class="title" role="heading"><spring:message code="search"/></h2>
     </div>
     -->
 
     <!-- Portlet Body -->
-    <div class="fl-widget-content portlet-body">
+    <div class="card-body portlet-body">
 
         <!-- Portlet Section -->
         <div id="${n}search" class="portlet-section" role="region">
 
             <div class="portlet-section-body">
 
-                <form id="${n}searchForm" action="${ formUrl }" class="form-inline" style="margin-bottom:10px;" method="POST">
-                    <div class="form-group">
-                        <input id="${n}searchInput" type="search" class="searchInput form-control" name="query" value="${ fn:escapeXml(query )}" aria-label="<spring:message code="search"/>" maxlength="200"/>
-                        <input id="${n}searchButton" type="submit" class="btn btn-default" value="<spring:message code="search.submit"/>"/>
-                    </div>
+                <form id="${n}searchForm" action="${ formUrl }" class="d-flex align-items-center gap-2" style="margin-bottom:10px;" method="POST">
+                    <input id="${n}searchInput" type="search" class="searchInput form-control" name="query" value="${ fn:escapeXml(query )}" aria-label="<spring:message code="search"/>" maxlength="200"/>
+                    <input id="${n}searchButton" type="submit" class="btn btn-secondary" value="<spring:message code="search.submit"/>"/>
                 </form>
 
                 <c:if test="${hitMaxQueries}">
@@ -80,16 +78,16 @@
                                     <div class="search-results">
                                         <c:forEach items="${ results[defaultTabKey] }" var="result">
                                             <div class="search-result">
-                                                <div class="panel panel-default">
-                                                    <div class="panel-heading">
-                                                        <h3 class="panel-title"><a class="result_link" href="${result.second}"><span class="result_title"><i class="fa fa-arrow-circle-right"></i> ${ result.first.title }</span></a></h3>
+                                                <div class="card">
+                                                    <div class="card-header">
+                                                        <h3 class="card-title"><a class="result_link" href="${result.second}"><span class="result_title"><i class="fa fa-arrow-circle-right"></i> ${ result.first.title }</span></a></h3>
                                                     </div>
-                                                    <div class="panel-body">
+                                                    <div class="card-body">
                                                         <p class="result_excerpt">${ result.first.summary }</p>
                                                     </div>
                                                     <%-- Start of display marketplace specific information --%>
                                                     <c:if test="${up:contains(result.first.type, 'marketplace')}">
-                                                        <div class="panel-footer">
+                                                        <div class="card-footer">
                                                             <p><a class="marketplace_entry_link" href="${pURL:getStringFromPortletUrl(result.first.portletUrl, pageContext.request)}">About this app</a>
                                                         </div>
                                                     </c:if>
@@ -106,11 +104,11 @@
                                         <div class="search-results">
                                             <c:forEach items="${ results[tabKey] }" var="result">
                                                 <div class="search-result">
-                                                    <div class="panel panel-default">
-                                                        <div class="panel-heading">
-                                                            <h3 class="panel-title"><a class="result_link" href="${result.second}"><span class="result_title"><i class="fa fa-external-link"></i> ${ result.first.title }</span></a></h3>
+                                                    <div class="card">
+                                                        <div class="card-header">
+                                                            <h3 class="card-title"><a class="result_link" href="${result.second}"><span class="result_title"><i class="fa fa-external-link"></i> ${ result.first.title }</span></a></h3>
                                                         </div>
-                                                        <div class="panel-body">
+                                                        <div class="card-body">
                                                             <p class="result_excerpt">${ result.first.summary }</p>
                                                         </div>
                                                     </div>
@@ -162,7 +160,7 @@
     });
 
     // Only search if the user entered some text to search for
-    $('#${n}searchForm').submit(function(event) {
+    $('#${n}searchForm').on('submit', function(event) {
         if ($('#${n}searchInput').val().trim().length == 0) {
             event.preventDefault();
         } else {
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Search/searchLauncher.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Search/searchLauncher.jsp
index 28e7236c6da..b46b95290fe 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Search/searchLauncher.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Search/searchLauncher.jsp
@@ -29,28 +29,22 @@
 
 <%-- Do not namespace webSearchContainer or webSearchSubmit. They are referenced in less files. You can change to
      class names, but that may impact users who have customized their less files. --%>
-<div id="webSearchContainer" class="fl-widget">
-    <div class="fl-widget-inner">
-      <div class="fl-widget-content">
-        <form class="form-search" role="form" method="POST" action="${searchLaunchUrl}" id="${n}webSearchForm">
-          <div class="input-group">
-            <spring:message code="search" var="searchPlaceholder" />
-            <spring:message code="search.terms" var="searchTitle" />
-            <spring:message code="search.submit" var="searchSubmit" />
-            <label for="${n}webSearchInput" class="sr-only">${searchTitle}</label>
-            <input id="${n}webSearchInput" class="searchInput input-large search-query form-control" value="" name="query"
-             type="search" placeholder="${searchPlaceholder}" title="${searchTitle}" maxlength="200"/>
-            <span class="input-group-btn">
-              <button id="webSearchSubmit" type="submit" name="submit" class="btn btn-default"
-               value="${searchSubmit}">
-                <span>${searchSubmit}</span>
-                <i class="fa fa-search" aria-hidden="true"></i>
-              </button>
-            </span>
-          </div>
-        </form>
+<div id="webSearchContainer" class="portal-search">
+    <form role="form" method="POST" action="${searchLaunchUrl}" id="${n}webSearchForm">
+      <div class="input-group">
+        <spring:message code="search" var="searchPlaceholder" />
+        <spring:message code="search.terms" var="searchTitle" />
+        <spring:message code="search.submit" var="searchSubmit" />
+        <label for="${n}webSearchInput" class="visually-hidden">${searchTitle}</label>
+        <input id="${n}webSearchInput" class="searchInput form-control" value="" name="query"
+         type="search" placeholder="${searchPlaceholder}" title="${searchTitle}" maxlength="200"/>
+        <button id="webSearchSubmit" type="submit" name="submit" class="btn btn-secondary"
+         value="${searchSubmit}">
+          <span>${searchSubmit}</span>
+          <i class="fa fa-search" aria-hidden="true"></i>
+        </button>
       </div>
-    </div>
+    </form>
 </div>
 
 <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/search/autosuggestHandler.js"></script>
@@ -75,7 +69,7 @@
     });
 
     // Only search if the user entered some text to search for
-    $("#${n}webSearchForm").submit(function(event) {
+    $("#${n}webSearchForm").on('submit', function(event) {
         if ($( "#${n}webSearchInput").val().trim().length == 0) {
             event.preventDefault();
         } else {
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Search/searchRest.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Search/searchRest.jsp
index 8a3389635c7..5e6760620e3 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Search/searchRest.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Search/searchRest.jsp
@@ -17,7 +17,7 @@
 <%@ include file="/WEB-INF/jsp/include.jsp"%>
 
 <template id="search-results-tab-header-template">
-    <li role="presentation" class="up-search-tab"><a href="" data-toggle="tab"></a></li>
+    <li role="presentation" class="nav-item up-search-tab"><a class="nav-link" href="" data-bs-toggle="tab"></a></li>
 </template>
 
 <template id="search-results-tab-panel-template">
@@ -28,15 +28,15 @@
 
 <template id="search-result-item-template">
     <li class="up-search-list-item list-group-item">
-        <span class="up-search-list-item-secondary-content pull-right">
+        <span class="up-search-list-item-secondary-content float-end">
             <a class="up-search-list-item-secondary-action" href="#">
                 <i class="fa fa-window-maximize" aria-hidden="true"></i>
             </a>
         </span>
         <span class="up-search-list-item-primary-content">
-            <i class="up-search-list-item-avatar pull-left fa"></i>
-            <h3 class="up-search-list-item-title list-group-item-heading"></h3>
-            <span class="up-search-list-item-body list-group-item-text">
+            <i class="up-search-list-item-avatar float-start fa"></i>
+            <h3 class="up-search-list-item-title"></h3>
+            <span class="up-search-list-item-body">
                 <dl></dl>
             </span>
         </span>
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/SessionTimeout/body.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/SessionTimeout/body.jsp
index 8d09a050cce..dbcaf1005fb 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/SessionTimeout/body.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/SessionTimeout/body.jsp
@@ -31,7 +31,7 @@
         <p><spring:message code="session-timeout.body2"/></p>
     </div>
     <div class="modal-footer">
-        <button type="button" class="btn btn-default refresh-session" data-dismiss="modal">
+        <button type="button" class="btn btn-secondary refresh-session" data-bs-dismiss="modal">
             <spring:message code="session-timeout.button.keep-alive"/>
         </button>
         <button type="button" class="btn btn-primary logout">
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/SqlQuery/config.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/SqlQuery/config.jsp
index 09aa203ca35..211e29c64cb 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/SqlQuery/config.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/SqlQuery/config.jsp
@@ -27,17 +27,17 @@
 </portlet:actionURL>
 
 <!-- Portlet -->
-<div class="fl-widget portlet" role="section">
+<div class="card portlet" role="section">
 
     <!-- Portlet Title -->
-  <div class="fl-widget-titlebar portlet-title" role="sectionhead">
+  <div class="card-header portlet-title" role="sectionhead">
     <h2 role="heading">SQL Query Portlet Configuration</h2>
   </div> <!-- end: portlet-title -->
   
   <!-- Portlet Body -->
-  <div class="fl-widget-content portlet-body">
+  <div class="card-body portlet-body">
 
-    <form:form class="form-horizontal" role="form" modelAttribute="form" action="${formUrl}" method="POST">
+    <form:form class="" role="form" modelAttribute="form" action="${formUrl}" method="POST">
     
     <!-- Portlet Messages -->
     <spring:hasBindErrors name="form">
@@ -51,7 +51,7 @@
       <div class="portlet-section-body">
     
         <p>
-    	    <label class="portlet-form-field-label">SQL query:</label>
+    	    <label class="portlet-form-field-label form-label">SQL query:</label>
 	       <form:textarea path="sqlQuery" rows="4" cols="120"/>
             <div>Allows Spring Expression Language (SpEL) expressions such as \${request.contextPath}, \${userInfo['user.login.id']}, or @MyBeanName<br/>
               You typically define a default using the elvis operator ?: in case an attribute has no value to avoid sql grammar errors; e.g. something like<br/>
@@ -62,17 +62,17 @@
 	    </p>
 
 	    <p>
-    	    <label class="portlet-form-field-label">Spring data source bean name:</label>
+    	    <label class="portlet-form-field-label form-label">Spring data source bean name:</label>
 	       <form:input path="dataSource" size="50"/>
 	    </p>
 	
         <p>
-	       <label class="portlet-form-field-label">Spring view:</label>
+	       <label class="portlet-form-field-label form-label">Spring view:</label>
 	       <form:input path="viewName" size="50"/>
 	    </p>
 
         <p>
-            <label class="portlet-form-field-label">Cache name:</label>
+            <label class="portlet-form-field-label form-label">Cache name:</label>
             <form:input path="cacheName" size="50"/>
             <div><em>Enter 'org.apereo.portal.portlets.sqlquery.SqlQueryPortletController.queryResults' for preconfigured cache.</em> If other than the preconfigured cache name, you must create a cache in ehcache.xml with the name you enter here.
                  <br/>Leave empty to disable caching. <em>WARNING!</em> This would impact performance and scalability!
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/SqlQuery/googleColumnChart.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/SqlQuery/googleColumnChart.jsp
index cb17b56fe6d..86a265de20d 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/SqlQuery/googleColumnChart.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/SqlQuery/googleColumnChart.jsp
@@ -24,10 +24,10 @@
 <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAA6IxXqpYkVvIBECmLUV99fRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxRKtN-K3WJJ0qPp2xOcWG-RdEe73Q"></script>
     
 <!-- Portlet -->
-<div class="fl-widget portlet" role="section">
+<div class="card portlet" role="section">
   
   <!-- Portlet Body -->
-  <div class="fl-widget-content portlet-body">
+  <div class="card-body portlet-body">
   
     <!-- Portlet Section -->
     <div id="${n}sqlPager" class="portlet-section" role="region">
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/SqlQuery/googleLineChart.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/SqlQuery/googleLineChart.jsp
index ac09a16f1ce..4773df8aa78 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/SqlQuery/googleLineChart.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/SqlQuery/googleLineChart.jsp
@@ -24,10 +24,10 @@
 <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAA6IxXqpYkVvIBECmLUV99fRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxRKtN-K3WJJ0qPp2xOcWG-RdEe73Q"></script>
     
 <!-- Portlet -->
-<div class="fl-widget portlet" role="section">
+<div class="card portlet" role="section">
   
   <!-- Portlet Body -->
-  <div class="fl-widget-content portlet-body">
+  <div class="card-body portlet-body">
   
     <!-- Portlet Section -->
     <div id="${n}sqlPager" class="portlet-section" role="region">
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/SqlQuery/results.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/SqlQuery/results.jsp
index a438608b269..918cbf3d99d 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/SqlQuery/results.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/SqlQuery/results.jsp
@@ -75,10 +75,10 @@
 </style>
 
 <!-- Portlet -->
-<div class="fl-widget portlet" role="section">
+<div class="card portlet" role="section">
   
   <!-- Portlet Body -->
-  <div id="${n}resultBrowser" class="fl-widget-content portlet-body">
+  <div id="${n}resultBrowser" class="card-body portlet-body">
   
         <table id="${n}sqlResults" style="width:100%;">
             <thead>
@@ -147,9 +147,13 @@
             fnRowCallback: function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
             },
             // Setting the top and bottom controls
-            sDom: 'r<"row alert alert-info view-filter"<"toolbar-filter"><W><"toolbar-br"><"dataTables-inline dataTables-left"p><"dataTables-inline dataTables-left"i><"dataTables-inline dataTables-left"l>><"row"<"span12"t>>>',
-            // Filtering
-            oColumnFilterWidgets: { }
+            sDom: 'r<"row alert alert-info view-filter"<"toolbar-filter"><P><"toolbar-br"><"dataTables-inline dataTables-left"p><"dataTables-inline dataTables-left"i><"dataTables-inline dataTables-left"l>><"row"<"span12"t>>>',
+            // SearchPanes configuration (modern replacement for ColumnFilterWidgets)
+            searchPanes: {
+                cascadePanes: true,
+                viewTotal: true,
+                layout: 'columns-3'
+            }
         });
     };
     initializeTable();
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Statistics/reportGraph.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Statistics/reportGraph.jsp
index 0c9ce9a0d2e..aeca4e66b29 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Statistics/reportGraph.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Statistics/reportGraph.jsp
@@ -36,10 +36,10 @@
 <script type="text/javascript" src="${canvas2imageScriptPath}"></script>
 
 <!-- Portlet -->
-<div class="fl-widget portlet" role="section">
+<div class="card portlet" role="section">
   
   <!-- Portlet Body -->
-  <div class="fl-widget-content portlet-body">
+  <div class="card-body portlet-body">
   
     <!-- Portlet Section -->
     <div id="${n}" class="portlet-section" role="region">
@@ -291,15 +291,15 @@ up.jQuery(function() {
          return false;
       } else {
          $("#${n}_formError").hide();
-         $("#${n}_reportForm input[type=submit]").removeAttr("disabled");
+         $("#${n}_reportForm input[type=submit]").prop("disabled", false);
          return true;
       }
    };
 
-   $(window).resize(resizeChart);
+   $(window).on('resize', resizeChart);
 
    $("#${n} .datepicker").datepicker();
-   $('#${n}_reportForm').submit(function(event) {
+   $('#${n}_reportForm').on('submit', function(event) {
        if (!validateIntervals()) {
            return false;
        }
@@ -349,7 +349,7 @@ up.jQuery(function() {
        event.preventDefault();
    });
 
-   $("#${n}_editChart").click(function() { editChart(); return false; });
+   $("#${n}_editChart").on('click', function() { editChart(); return false; });
    $("#${n}_downloadPng").mousedown(downloadPng);
 
    // Add validation listeners
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Statistics/reportList.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Statistics/reportList.jsp
index 7130959e786..61cfbb7c0fd 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Statistics/reportList.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Statistics/reportList.jsp
@@ -23,10 +23,10 @@
 <c:set var="n"><portlet:namespace/></c:set>
 
 <!-- Portlet -->
-<div class="fl-widget portlet" role="section">
+<div class="card portlet" role="section">
   
   <!-- Portlet Body -->
-  <div class="fl-widget-content portlet-body">
+  <div class="card-body portlet-body">
   
     <!-- Portlet Section -->
     <div id="${n}" class="portlet-section" role="region">
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/TenantManager/addTenant.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/TenantManager/addTenant.jsp
index 52c19cec35e..969f838c621 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/TenantManager/addTenant.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/TenantManager/addTenant.jsp
@@ -44,22 +44,22 @@
     padding: 3px;
     margin: 0 5px;
 }
-#${n}tenantManager .has-error .field-error {
+#${n}tenantManager .is-invalid .field-error {
     display: block;
 }
 </style>
 
 <div id="${n}tenantManager">
     <h2><spring:message code="tenant.manager.add" /></h2>
-    <form id="addTenantForm" role="form" class="form-horizontal" action="${doAddTenantUrl}" method="POST">
+    <form id="addTenantForm" role="form" class="" action="${doAddTenantUrl}" method="POST">
         <c:set var="errorCssClass">
             <c:choose>
-                <c:when test="${invalidFields['name'] ne null}">has-error</c:when>
+                <c:when test="${invalidFields['name'] ne null}">is-invalid</c:when>
                 <c:otherwise></c:otherwise>
             </c:choose>
         </c:set>
-        <div class="form-group ${errorCssClass}">
-            <label for="tenantName" class="col-sm-2 control-label"><spring:message code="tenant.manager.name" /></label>
+        <div class="row mb-3 ${errorCssClass}">
+            <label for="tenantName" class="col-sm-2 col-form-label"><spring:message code="tenant.manager.name" /></label>
             <div class="col-sm-10">
                 <c:set var="previousResponse">
                     <c:choose>
@@ -75,12 +75,12 @@
         <c:forEach items="${tenantManagerAttributes}" var="attribute">
             <c:set var="errorCssClass">
                 <c:choose>
-                    <c:when test="${invalidFields[attribute.key] ne null}">has-error</c:when>
+                    <c:when test="${invalidFields[attribute.key] ne null}">is-invalid</c:when>
                     <c:otherwise></c:otherwise>
                 </c:choose>
             </c:set>
-            <div class="form-group ${errorCssClass}">
-                <label for="${attribute.key}" class="col-sm-2 control-label"><spring:message code="${attribute.value}" /></label>
+            <div class="row mb-3 ${errorCssClass}">
+                <label for="${attribute.key}" class="col-sm-2 col-form-label"><spring:message code="${attribute.value}" /></label>
                 <div class="col-sm-10">
                     <c:set var="previousResponse">
                         <c:choose>
@@ -95,14 +95,14 @@
         </c:forEach>
 
         <c:if test="${not empty optionalOperationsListeners}">
-            <div class="form-group">
-                <label class="col-sm-2 control-label"><spring:message code="tenant.manager.optional.steps" /></label>
+            <div class="row mb-3">
+                <label class="col-sm-2 col-form-label"><spring:message code="tenant.manager.optional.steps" /></label>
                 <div class="col-sm-10">
-                    <div class="panel panel-default">
-                        <div class="panel-body">
-                            <div class="checkbox">
+                    <div class="card">
+                        <div class="card-body">
+                            <div class="form-check">
                                 <c:forEach items="${optionalOperationsListeners}" var="listener">
-                                    <label>
+                                    <label class="form-label">
                                         <input name="optionalListener" type="checkbox" value="${listener.fname}" checked="checked" /> <c:out value="${listener.name}" />
                                     </label>
                                 </c:forEach>
@@ -113,7 +113,7 @@
             </div>
         </c:if>
 
-        <div class="text-right">
+        <div class="text-end">
             <input type="hidden" name="fname" id="fname" value="">
             <button id="tenantFormSubmit" type="submit" class="btn btn-primary">Submit</button>
             <a href="<portlet:renderURL />" class="btn btn-link">Cancel</a>
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/TenantManager/report.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/TenantManager/report.jsp
index ff47558718c..885dc099ba1 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/TenantManager/report.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/TenantManager/report.jsp
@@ -33,9 +33,9 @@
             <c:otherwise>danger</c:otherwise>
         </c:choose>
     </c:set>
-    <div class="panel panel-${resultCssClass}">
-        <div class="panel-heading"><span class="label label-${resultCssClass}"><c:out value="${response.result}" /></span> <c:out value="${response.tenantOperationsListener.name}" /></div>
-        <div class="panel-body">
+    <div class="card border-${resultCssClass}">
+        <div class="card-header"><span class="badge bg-${resultCssClass}"><c:out value="${response.result}" /></span> <c:out value="${response.tenantOperationsListener.name}" /></div>
+        <div class="card-body">
             <c:forEach items="${response.messages}" var="message">
                 <i class="fa fa-info-circle"></i> <c:out value="${message}" escapeXml="false" />
             </c:forEach>
@@ -50,5 +50,5 @@
     <c:if test="${not empty resultTenantAddMessage}">
         <spring:message code="${resultTenantAddMessage}" htmlEscape="false"/>
     </c:if>
-    <a class="btn btn-primary pull-right" href="<portlet:renderURL />" role="button"><spring:message code="done" /></a>
+    <a class="btn btn-primary float-end" href="<portlet:renderURL />" role="button"><spring:message code="done" /></a>
 </div>
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/TenantManager/tenantDetails.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/TenantManager/tenantDetails.jsp
index 080c0f0cd36..1946561212e 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/TenantManager/tenantDetails.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/TenantManager/tenantDetails.jsp
@@ -40,23 +40,23 @@
     padding: 3px;
     margin: 0 5px;
 }
-#${n}tenantDetails .has-error div.field-error {
+#${n}tenantDetails .is-invalid div.field-error {
     display: block;
 }
 </style>
 
 <div id="${n}tenantDetails">
     <h2><spring:message code="tenant.details" /> <c:out value="${tenant.name}" /></h2>
-    <form id="updateTenantForm" role="form" class="form-horizontal" action="${doUpdateTenantUrl}" method="POST">
+    <form id="updateTenantForm" role="form" class="" action="${doUpdateTenantUrl}" method="POST">
         <c:forEach items="${tenantManagerAttributes}" var="attribute">
             <c:set var="errorCssClass">
                 <c:choose>
-                    <c:when test="${invalidFields[attribute.key] ne null}">has-error</c:when>
+                    <c:when test="${invalidFields[attribute.key] ne null}">is-invalid</c:when>
                     <c:otherwise></c:otherwise>
                 </c:choose>
             </c:set>
-            <div class="form-group ${errorCssClass}">
-                <label for="${attribute.key}" class="col-sm-2 control-label"><spring:message code="${attribute.value}" /></label>
+            <div class="row mb-3 ${errorCssClass}">
+                <label for="${attribute.key}" class="col-sm-2 col-form-label"><spring:message code="${attribute.value}" /></label>
                 <div class="col-sm-10">
                     <c:set var="previousValue">
                         <c:choose>
@@ -70,13 +70,13 @@
             </div>
         </c:forEach>
 
-        <div class="btn-group pull-right">
+        <div class="btn-group float-end">
             <c:forEach items="${operationsListenerAvailableActions}" var="listenerAction">
                 <portlet:actionURL var="listenerActionUrl">
                     <portlet:param name="action" value="doListenerAction"/>
                     <portlet:param name="fname" value="${listenerAction.fname}"/>
                 </portlet:actionURL>
-                <a class="btn btn-default up-tenant-listener-action" data-href="${listenerActionUrl}" href="javascript:void(0)" role="button"><spring:message code="${listenerAction.messageCode}" htmlEscape="false" /></a>
+                <a class="btn btn-secondary up-tenant-listener-action" data-href="${listenerActionUrl}" href="javascript:void(0)" role="button"><spring:message code="${listenerAction.messageCode}" htmlEscape="false" /></a>
             </c:forEach>
             <button class="btn btn-primary" type="submit" onclick="return confirm('<spring:message code="tenant.manager.update.attributes.confirm" arguments="${tenant.name}" />')"><spring:message code="tenant.manager.update.attributes" htmlEscape="false" /></button>
             <a class="btn btn-link" href="<portlet:renderURL />" role="button"><spring:message code="cancel" /></a>
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/TenantManager/tenantManager.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/TenantManager/tenantManager.jsp
index c1a63fafe1b..a69661b475e 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/TenantManager/tenantManager.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/TenantManager/tenantManager.jsp
@@ -22,10 +22,10 @@
 <c:set var="n"><portlet:namespace/></c:set>
 
 <style>
-#${n}tenantManager .panel {
+#${n}tenantManager .card {
     margin-top: 15px;
 }
-#${n}tenantManager .panel-heading {
+#${n}tenantManager .card-header {
     font-weight: bold;
     position: relative;
 }
@@ -37,15 +37,15 @@
 
 <div id="${n}tenantManager">
 
-    <div class="panel panel-default tenant-manager">
-        <!-- Default panel contents -->
-        <div class="panel-heading clearfix">
+    <div class="card tenant-manager">
+        <!-- Default card contents -->
+        <div class="card-header clearfix">
             <spring:message code="tenant.manager" />
-            <div class="btn-group pull-right">
-                <a href="${showAddTenantUrl}" class="btn btn-primary btn-xs"><i class="fa fa-plus"></i> <spring:message code="tenant.manager.add" /></a>
+            <div class="btn-group float-end">
+                <a href="${showAddTenantUrl}" class="btn btn-primary btn-sm"><i class="fa fa-plus"></i> <spring:message code="tenant.manager.add" /></a>
             </div>
         </div>
-        <div class="panel-body">
+        <div class="card-body">
             <p><spring:message code="tenant.manager.welcome" /></p>
 
             <c:choose>
@@ -73,14 +73,14 @@
                                     <td><a href="${detailsUrl}" title="<spring:message code="tenant.manager.edit" /> ${tenant.name}"><c:out value="${tenant.name}" /></a></td>
                                     <td><c:out value="${tenant.fname}" /></td>
                                     <td><a href="mailto:${tenant.attributesMap['adminContactEmail']}" title="<spring:message code="tenant.manager.email.address.link" />">${tenant.attributesMap['adminContactUsername']}</a></td>
-                                    <td class="text-right"><a class="btn btn-xs btn-danger up-tenant-remove" data-href="${removeUrl}" data-confirm="<spring:message code="tenant.manager.remove.tenant.confirm" arguments="${tenant.name}" />" title="<spring:message code="tenant.manager.remove.tenant" />" href="javascript:void(0)"><span class="glyphicon glyphicon-trash"></span> <spring:message code="tenant.manager.remove" /></a></td>
+                                    <td class="text-end"><a class="btn btn-sm btn-danger up-tenant-remove" data-href="${removeUrl}" data-confirm="<spring:message code="tenant.manager.remove.tenant.confirm" arguments="${tenant.name}" />" title="<spring:message code="tenant.manager.remove.tenant" />" href="javascript:void(0)"><span class="glyphicon glyphicon-trash"></span> <spring:message code="tenant.manager.remove" /></a></td>
                                 </tr>
                             </c:forEach>
                         </tbody>
                     </table>
                 </c:when>
                 <c:otherwise>
-                    <div class="col-sm-8 col-sm-offset-2 alert alert-info"><spring:message code="tenant.manager.no.tenants" /></div>
+                    <div class="col-sm-8 offset-sm-2 alert alert-info"><spring:message code="tenant.manager.no.tenants" /></div>
                 </c:otherwise>
             </c:choose>
         </div>
diff --git a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Translator/translator.jsp b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Translator/translator.jsp
index 3eba28c3c63..7786c39f62f 100644
--- a/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Translator/translator.jsp
+++ b/uPortal-webapp/src/main/webapp/WEB-INF/jsp/Translator/translator.jsp
@@ -22,7 +22,7 @@
 <portlet:resourceURL var="resourceUrl" />
 <c:set var="ns"><portlet:namespace /></c:set>
 
-<div class="fl-widget portlet" id="${ns}container">
+<div class="card portlet" id="${ns}container">
   <form id="${ns}form" class="portlet-form" style="position: relative;">
     <c:set var="entityTypeSelection">
       <select id="${ns}entityType" class="form-control" aria-label="<spring:message code="translator.portlet.or.message" />">
@@ -56,7 +56,7 @@
         <div class="portlet-form">
           <fieldset>
             <legend>
-              <label for="${ns}TranslationTitle">
+              <label for="${ns}TranslationTitle" class="form-label">
                 <spring:message code="title" />
               </label>
             </legend>
@@ -70,7 +70,7 @@
 
           <fieldset>
             <legend>
-              <label for="${ns}TranslationName">
+              <label for="${ns}TranslationName" class="form-label">
                 <spring:message code="name" />
               </label>
             </legend>
@@ -84,7 +84,7 @@
 
           <fieldset>
             <legend>
-              <label for="${ns}TranslationDescription">
+              <label for="${ns}TranslationDescription" class="form-label">
                 <spring:message code="description" />
               </label>
             </legend>
@@ -96,7 +96,7 @@
           </fieldset>
           <br />
 
-          <input class="btn btn-default" type="submit" value="<spring:message code="submit" />" />
+          <input class="btn btn-secondary" type="submit" value="<spring:message code="submit" />" />
           <br />
         </div>
         <input type="hidden" name="id" class="uptrans-pfrm-id" />
@@ -114,7 +114,7 @@
         <div class="portlet-form">
           <fieldset class="uptrans-mfrm-code-fieldset">
             <legend>
-              <label for="${ns}TranslationCode">
+              <label for="${ns}TranslationCode" class="form-label">
                 <spring:message code="code" />
               </label>
             </legend>
@@ -122,13 +122,13 @@
           </fieldset>
           <fieldset>
             <legend>
-              <label for="${ns}TranslationValue">
+              <label for="${ns}TranslationValue" class="form-label">
                 <spring:message code="value" />
               </label>
             </legend>
             <textarea id="${ns}TranslationValue" name="value" class="uptrans-mfrm-value form-control"></textarea>
           </fieldset>
-          <input class="btn btn-default" type="submit" value="<spring:message code="submit" />" />
+          <input class="btn btn-secondary" type="submit" value="<spring:message code="submit" />" />
         </div>
         <input type="hidden" name="locale" class="uptrans-mfrm-loc" />
         <input type="hidden" name="entity" value="message" />
@@ -142,10 +142,10 @@
 
   <div class="uptrans-entities-wrapper">
     <div id="${ns}entities" class="uptrans-entities">
-      <button class="btn btn-default" id="${ns}entityList" class="uptrans-entity"></button>
+      <button class="btn btn-secondary uptrans-entity" id="${ns}entityList"></button>
     </div>
     <div class="ui-helper-clearfix">
-      <button id="${ns}addMessage" class="btn btn-default" style="display:none;">
+      <button id="${ns}addMessage" class="btn btn-secondary" style="display:none;">
         <spring:message code="add.message" />
       </button>
     </div>
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/common_skin.xml b/uPortal-webapp/src/main/webapp/media/skins/common/common_skin.xml
index 6dc52961bec..b54f3a71f6d 100644
--- a/uPortal-webapp/src/main/webapp/media/skins/common/common_skin.xml
+++ b/uPortal-webapp/src/main/webapp/media/skins/common/common_skin.xml
@@ -23,28 +23,34 @@
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://www.jasig.org/uportal/web/skin https://source.jasig.org/schemas/resource-server/skin-configuration/skin-configuration-v1.2.xsd">
 
-  <js>javascript/uportal/up-util.js</js>
-  <js>javascript/uportal/up-portlet-registry.js</js>
-  <js>javascript/uportal/up-entity-registry.js</js>
-  <js>javascript/uportal/up-portlet-browser.js</js>
-  <js>javascript/uportal/up-layout-draggable-manager.js</js>
-  <js>javascript/uportal/up-layout-gallery.js</js>
-  <js>javascript/uportal/up-fragment-permissions-manager.js</js>
-  <js>javascript/uportal/up-layout-selector.js</js>
-  <js>javascript/uportal/up-skin-selector.js</js>
-  <js>javascript/uportal/up-tab-manager.js</js>
-  <js>javascript/uportal/up-layout-persistence.js</js>
-  <js>javascript/uportal/up-url-provider.js</js>
-  <js>javascript/uportal/up-layout-preferences.js</js>
-  <js>javascript/uportal/up-autocomplete.js</js>
-  <js>javascript/uportal/up-showHideToggle.js</js>
-  <js>javascript/uportal/entity-selector.js</js>
-  <js>javascript/uportal/up-parameter-editor.js</js>
-  <js>javascript/uportal/flyout-nav.js</js>
-  <js>javascript/uportal/up-translator.js</js>
-  <js>javascript/uportal/up-ga.js</js>
-  <js>javascript/uportal/up-rating-option.js</js>
-  <js>javascript/uportal/up-favorite.js</js>
-  <js>javascript/uportal/up-config-lightbox.js</js>
+
+  <!-- <js>javascript/uportal/reload-detection.js</js> -->
+  <js>javascript/uportal/modern-util.js</js>
+  <js>javascript/uportal/modern-portlet-registry.js</js>
+  <js>javascript/uportal/modern-url-provider.js</js>
+  <js>javascript/uportal/modern-uploader.js</js>
+
+  <js>javascript/uportal/modern-layout-draggable-manager.js</js>
+  <js>javascript/uportal/modern-portlet-browser.js</js>
+  <js>javascript/uportal/modern-portal-gallery.js</js>
+  <js>javascript/uportal/modern-tab-manager.js</js>
+  <js>javascript/uportal/modern-layout-preferences-persistence.js</js>
+  <js>javascript/uportal/modern-layout-preferences.js</js>
+  <js>javascript/uportal/modern-fragment-permissions-manager.js</js>
+
+  <js>javascript/uportal/modern-autocomplete.js</js>
+  <js>javascript/uportal/modern-show-hide-toggle.js</js>
+  <js>javascript/uportal/modern-entity-selector.js</js>
+  <js>javascript/uportal/modern-parameter-editor.js</js>
+  <js>javascript/uportal/modern-flyout-nav.js</js>
+  <js>javascript/uportal/modern-translator.js</js>
+  <css>css/modern-uploader.css</css>
+  <css>css/modern-pager.css</css>
+  <css>css/modern-portlet-list.css</css>
+  
+  <js>javascript/uportal/modern-ga.js</js>
+  <js>javascript/uportal/modern-rating-option.js</js>
+  <js>javascript/uportal/modern-favorite.js</js>
+  <js>javascript/uportal/modern-config-lightbox.js</js>
 
 </resources>
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/css/modern-pager.css b/uPortal-webapp/src/main/webapp/media/skins/common/css/modern-pager.css
new file mode 100644
index 00000000000..1cfb34c789e
--- /dev/null
+++ b/uPortal-webapp/src/main/webapp/media/skins/common/css/modern-pager.css
@@ -0,0 +1,114 @@
+/*
+ * Modern pager styles - minimal CSS for pagination functionality
+ * Replaces Fluid pager CSS with Bootstrap-compatible styles
+ */
+
+.pager-links {
+    display: flex;
+    justify-content: center;
+    margin: 1rem 0;
+}
+
+.pager-next,
+.pager-previous,
+.pager-pageLink {
+    display: inline-block;
+    padding: 0.375rem 0.75rem;
+    margin: 0 0.125rem;
+    text-decoration: none;
+    border: 1px solid #dee2e6;
+    border-radius: 0.375rem;
+    color: #0d6efd;
+}
+
+.pager-pageLink-disabled {
+    color: #6c757d;
+    pointer-events: none;
+    background-color: #e9ecef;
+}
+
+.pager-summary {
+    text-align: center;
+    margin: 0.5rem 0;
+    color: #6c757d;
+}
+
+.pager-page-size {
+    margin: 0.5rem 0;
+}
+
+.pager-top {
+    margin-bottom: 1rem;
+}
+
+/* Pager button positioning */
+.pager {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    height: 164px; /* 2 rows × 82px height */
+}
+
+.pager-button-up,
+.pager-button-down {
+    width: 40px;
+    height: 40px;
+    margin: 0;
+}
+
+.pager-button-up {
+    align-self: center;
+    margin-bottom: 2px; /* Small gap between buttons */
+}
+
+.pager-button-down {
+    align-self: center;
+    margin-top: 2px; /* Small gap between buttons */
+}
+
+.pager-button-up-inner,
+.pager-button-down-inner {
+    display: block;
+    width: 100%;
+    height: 100%;
+    background: #f8f9fa;
+    border: 1px solid #dee2e6;
+    border-radius: 4px;
+    text-decoration: none;
+    position: relative;
+}
+
+.pager-button-up-inner:hover,
+.pager-button-down-inner:hover {
+    background: #e9ecef;
+}
+
+.fl-pager-disabled .pager-button-up-inner,
+.fl-pager-disabled .pager-button-down-inner {
+    background: #e9ecef;
+    color: #6c757d;
+    cursor: not-allowed;
+}
+
+/* Arrow icons */
+.pager-button-up-inner span::before {
+    content: '▲';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 12px;
+    color: #6c757d;
+}
+
+.pager-button-down-inner span::before {
+    content: '▼';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 12px;
+    color: #6c757d;
+}
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/css/modern-portlet-list.css b/uPortal-webapp/src/main/webapp/media/skins/common/css/modern-portlet-list.css
new file mode 100644
index 00000000000..a213f3fa8ef
--- /dev/null
+++ b/uPortal-webapp/src/main/webapp/media/skins/common/css/modern-portlet-list.css
@@ -0,0 +1,51 @@
+/*
+ * Modern portlet list carousel styling
+ * Float-based layout matching release version
+ */
+
+/* Container layout matching release */
+.results-list,
+.portlet-list {
+    overflow: hidden;
+    padding: 5px 0px 0px;
+    position: relative;
+}
+
+/* Portlet items with float layout - 3 per row - more specific selector */
+.up-gallery .results-wrapper .portlet-list li.result-item.portlet {
+    width: 32% !important;
+    height: 50% !important;
+    margin: 0px 5px 5px 0px !important;
+    float: left !important;
+}
+
+/* Clear every 3rd item to force new row */
+.result-item.portlet:nth-child(3n+1) {
+    clear: left;
+}
+
+/* Clearfix for container */
+.results-list::after,
+.portlet-list::after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+/* Wrapper containers */
+.results-wrapper,
+.portlet-results {
+    overflow: hidden;
+    position: relative;
+}
+
+.results-column {
+    margin: 0px 74px 0px 0px;
+    position: relative;
+}
+
+/* Icon layout */
+.up-gallery .portlet-wrapper .ri-icon {
+    float: left;
+    margin-right: 8px;
+}
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/css/modern-uploader.css b/uPortal-webapp/src/main/webapp/media/skins/common/css/modern-uploader.css
new file mode 100644
index 00000000000..20e6c042515
--- /dev/null
+++ b/uPortal-webapp/src/main/webapp/media/skins/common/css/modern-uploader.css
@@ -0,0 +1,36 @@
+/*
+ * Modern uploader styles - minimal CSS for file upload functionality
+ * Replaces Fluid uploader CSS with Bootstrap-compatible styles
+ */
+
+.uploader-queue-footer td {
+    padding: 6px;
+}
+
+.uploader-file-progress {
+    margin: 0.5rem 0;
+}
+
+.uploader-browse-instructions {
+    text-align: center;
+    padding: 1rem;
+    border: 2px dashed #dee2e6;
+    border-radius: 0.375rem;
+    margin: 1rem 0;
+}
+
+.uploader-errors-panel {
+    margin-top: 1rem;
+}
+
+.uploader-buttons {
+    margin-top: 1rem;
+}
+
+.uploader-status-region {
+    position: absolute;
+    left: -10000px;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+}
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/entity-selector.js b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/entity-selector.js
deleted file mode 100644
index 13f78a031ab..00000000000
--- a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/entity-selector.js
+++ /dev/null
@@ -1,985 +0,0 @@
-/*
- * Licensed to Apereo under one or more contributor license
- * agreements. See the NOTICE file distributed with this work
- * for additional information regarding copyright ownership.
- * Apereo licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file
- * except in compliance with the License.  You may obtain a
- * copy of the License at the following location:
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-'use strict';
-var up = up || {};
-
-(function ($, fluid) {
-    /**
-     * Private. Returns type from key.
-     *
-     * @param {String} key - reference to entity key.
-     */
-    var getTypeFromKey = function (key) {
-        var separatorIndex = key.indexOf(':');
-        return key.slice(0, Math.max(0, separatorIndex));
-    }; // end:function.
-
-    /**
-     * Private. Returns ID.
-     *
-     * @param {String} key
-     */
-    var getIdFromKey = function (key) {
-        var separatorIndex = key.indexOf(':');
-        // eslint-disable-next-line unicorn/prefer-string-slice
-        return key.substring(separatorIndex + 1, key.length);
-    }; // end:function.
-
-    /**
-     * Private. Builds key from entity.
-     *
-     * @param {Entity} entity - entity from entity registry
-     */
-    var getKey = function (entity) {
-        return entity.entityType + ':' + entity.id;
-    };
-
-    /**
-     * Private. Outputs selection markup snippet.
-     *
-     * @param {Object} that - reference to an instance of the up.entityselection component.
-     * @param {Object} entity - reference to currently selected entity object.
-     */
-    var buildSingleSelectionSnippet = function (that, entity, selected) {
-        var markup;
-
-        switch (selected) {
-            case false: {
-                markup =
-                    '<span class="selection" title="' +
-                    that.options.messages.nothingSelected +
-                    '">' +
-                    that.options.messages.nothingSelected +
-                    '</span>';
-                break;
-            }
-            case true: {
-                markup =
-                    '<a href="#" title="' +
-                    that.options.messages.removeSelection +
-                    '" key="' +
-                    getKey(entity) +
-                    '" class="' +
-                    that.options.styles.selection +
-                    '">' +
-                    entity.name +
-                    '</a>' +
-                    '<input type="hidden" name="groups" value="' +
-                    getKey(entity) +
-                    '"/>';
-                break;
-            }
-        } // end:switch.
-
-        return markup;
-    }; // end:function.
-
-    /**
-     * Private. Update button with selection state.
-     * (Idempotent)
-     *
-     * @param {Button} button - button to update click, class and text
-     * @param {Object} selectionBasket - DOM object with current selections
-     * @param {Object} that - reference to an instance of the up.entityselection component.
-     * @param {string} key - key to find in selection Basket for match
-     */
-    var updateButtonState = function (button, selectionBasket, that, key) {
-        button.unbind('click');
-        if (selectionBasket.find("a[key='" + key + "']").size() > 0) {
-            button
-                .text('Remove from Selection ')
-                .append("<i class='fa fa-minus-circle'></i>");
-            button.removeClass('btn-success').addClass('btn-danger');
-            button.bind('click', function () {
-                deselectEntity(that, key);
-            });
-        } else {
-            button
-                .text('Add to Selection ')
-                .append("<i class='fa fa-plus-circle'></i>");
-            button.removeClass('btn-danger').addClass('btn-success');
-            button.bind('click', function () {
-                selectEntity(that, key);
-            });
-        }
-    };
-
-    /**
-     * Private. Update the visual selection states for the various selection links.
-     * (Idempotent)
-     *
-     * @param {Object} that - reference to an instance of the up.entityselection component.
-     */
-    var updateSelectionStates = function (that) {
-        var content;
-        var selectionBasket;
-        var button;
-        var key;
-
-        // Get selections.
-        selectionBasket = that.locate('selectionBasket');
-
-        // Check current current entity.
-        button = that.locate('currentSelectBtn');
-        key = that.locate('currentEntityName').attr('key');
-        updateButtonState(button, selectionBasket, that, key);
-
-        // Check ad hoc groups table.
-        content = that.locate('entityBrowserContent');
-        content.find('button.btn-select').each(function () {
-            key = $(this).attr('key');
-            updateButtonState($(this), selectionBasket, that, key);
-        });
-    }; // end:function.
-
-    /**
-     * Private. Remove an entity from the selection list.
-     *
-     * @param {Object} that - reference to an instance of the up.entityselection component.
-     * @param {String} key - reference to passed anchor tag attribute. ex: group:local.17
-     */
-    var deselectEntity = function (that, key) {
-        var selectionBasket;
-        var entity;
-        var buttonPrimary;
-        var newselections;
-
-        // Cache & reset DOM references.
-        selectionBasket = that.locate('selectionBasket');
-        buttonPrimary = that.locate('buttonPrimary');
-        entity = that.registry.getEntity(
-            getTypeFromKey(key),
-            getIdFromKey(key)
-        );
-        newselections = [];
-
-        // Check component selection mode.
-        switch (that.selectMultiple) {
-            case false: {
-                // Single.
-                that.options.selected = [];
-                selectionBasket.html(
-                    buildSingleSelectionSnippet(that, entity, false)
-                );
-                break;
-            }
-            case true: {
-                // Multiple.
-                // Generate a new list of selected entities. Remove the requested
-                // entity from the selection basket.
-                selectionBasket.find('a').each(function () {
-                    var a = $(this);
-                    if (a.attr('key') === key) {
-                        a.parent().remove();
-                    } else {
-                        newselections.push(a.attr('key'));
-                    } // end:if.
-                }); // end:loop.
-                that.options.selected = newselections;
-                break;
-            }
-        } // end:switch.
-
-        updateSelectionStates(that);
-
-        // Enable submit.
-        if (
-            that.options.selected.length === 0 &&
-            that.options.requireSelection
-        ) {
-            buttonPrimary.attr('disabled', 'disabled');
-        } // end:if.
-    }; // end:function.
-
-    /**
-     * Private. Add an entity to the selected list.
-     *
-     * @param {Object} that - reference to an instance of the up.entityselection component.
-     * @param {String} key - reference to currrently 'selected' entity. ex: group:local.17
-     */
-    var selectEntity = function (that, key) {
-        var selectionBasket;
-        var buttonPrimary;
-        var li;
-        var entity;
-
-        // Cache DOM elements.
-        selectionBasket = that.locate('selectionBasket');
-        buttonPrimary = that.locate('buttonPrimary');
-        entity = that.registry.getEntity(
-            getTypeFromKey(key),
-            getIdFromKey(key)
-        );
-
-        // Check component selection mode.
-        switch (that.selectMultiple) {
-            case false: {
-                // Single.
-                that.options.selected = [];
-                that.options.selected.push(key);
-                selectionBasket.html(
-                    buildSingleSelectionSnippet(that, entity, true)
-                );
-
-                // Assign click event.
-                selectionBasket.find('a').click(function () {
-                    that.options.selected = [];
-                    selectionBasket.html(
-                        buildSingleSelectionSnippet(that, entity, false)
-                    );
-                    deselectEntity(that, $(this).attr('key'));
-                }); // end:click.
-                break;
-            }
-            case true: {
-                // Multiple.
-                // If 'key' does not exist within 'selected' arrary.
-                if ($.inArray(key, that.options.selected) < 0) {
-                    // Add the key to our selected list.
-                    that.options.selected.push(key);
-
-                    // Add an element to the user-visible select list.
-                    li = $(
-                        '<li><a href="#" key="' +
-                            getKey(entity) +
-                            '">' +
-                            entity.name +
-                            '</a><input type="hidden" name="groups" value="' +
-                            getKey(entity) +
-                            '"/></li>'
-                    );
-
-                    // Append li to selectionBasket.
-                    selectionBasket.find('ul').append(li);
-
-                    // Assign click event.
-                    li.find('a').click(function () {
-                        deselectEntity(that, $(this).attr('key'));
-                    }); // end:click.
-                } // end:if.
-                break;
-            }
-        } // end:switch.
-
-        updateSelectionStates(that);
-
-        // Enable submit.
-        buttonPrimary.removeAttr('disabled');
-    }; // end:function.
-
-    /**
-     * Private. Remove breadcrumb from breadcrumb lists.
-     *
-     * @param {Object} that - reference to an instance of the up.entityselection component.
-     * @param {Object} anchor - reference to <a> element.
-     @ @param {Function} browseFn - function to associate with anchor
-     */
-    var removeBreadCrumb = function (that, anchor, browseFunction) {
-        var crumb;
-        var next;
-
-        // Cache.
-        crumb = anchor.parent();
-        next = crumb.nextAll();
-
-        // Remove all crumbs to the right of the 'clicked' crumb.
-        next.remove();
-
-        // Render view associated with the 'clicked' crumb.
-        browseFunction(that, anchor.attr('key'));
-    }; // end:function.
-
-    /**
-     * Private. Builds mark-up string for breadCrumb.
-     *
-     * @param {Object} key - reference to entity key.
-     * @param {Object} entityName - reference to entity name.
-     * @param {Object} breadcrumbs - DOM object of breadcrumbs
-     @ @param {Function} browseFn - function to associate with anchor
-     */
-    var buildBreadCrumb = function (
-        that,
-        key,
-        entityName,
-        breadcrumbs,
-        browseFunction
-    ) {
-        var breadcrumb;
-        breadcrumb =
-            '<span><a href="#" title="' +
-            entityName +
-            '" key="' +
-            key +
-            '">' +
-            entityName +
-            '</a> &gt; </span>';
-        breadcrumbs.append(breadcrumb);
-
-        // Breadcrumb click event.
-        breadcrumbs
-            .find('a')
-            .unbind('click')
-            .click(function () {
-                removeBreadCrumb(that, $(this), browseFunction);
-            }); // end:click.
-    }; // end:function.
-
-    /**
-     * Private. Update the breadcrumb trail.
-     *
-     * @param {Object} that - reference to an instance of the up.entityselection component.
-     * @param {Object} entity - reference to the entity object.
-     * @param {String} breadcrumbsSel - selector name of breadcrumb
-     @ @param {Function} browseFn - function to associate with anchor
-     */
-    var updateBreadcrumbs = function (
-        that,
-        entity,
-        breadcrumbsSel,
-        browseFunction
-    ) {
-        var breadcrumbs;
-        var key;
-        var isKey;
-
-        // Cache.
-        breadcrumbs = that.locate(breadcrumbsSel);
-        key = getKey(entity);
-
-        // Add breadcrumb.
-        if (breadcrumbs.find('span').length > 0) {
-            // Breadcrumbs do exist.
-            isKey =
-                breadcrumbs.find('span a[key="' + key + '"]').length > 0
-                    ? true
-                    : false;
-            if (!isKey) {
-                buildBreadCrumb(
-                    that,
-                    key,
-                    entity.name,
-                    breadcrumbs,
-                    browseFunction
-                );
-            } // end:if.
-        } else {
-            // No breadcrumbs exist.
-            buildBreadCrumb(
-                that,
-                key,
-                entity.name,
-                breadcrumbs,
-                browseFunction
-            );
-        } // end:if.
-
-        // Add the '.last' class name to the last availble breadcrumb.
-        breadcrumbs
-            .find('.' + that.options.styles.last)
-            .removeClass(that.options.styles.last)
-            .css('visibility', 'visible');
-        breadcrumbs
-            .find('span:last')
-            .addClass(that.options.styles.last)
-            .css('visibility', 'hidden');
-    }; // end:function.
-
-    /**
-     * Private. Browse to a particular entity.
-     *
-     * @param {Object} that - reference to an instance of the up.entityselection component.
-     * @param {String} key - reference to currently 'focused' group key. ex: group:pags.Ad%20Hoc%20Groups
-     */
-    var browseEntity = function (that, key) {
-        console.log('browse ad hoc');
-        var entity;
-        var currentEntityName;
-        var content;
-
-        // Cache.
-        entity = that.registry.getEntity(
-            getTypeFromKey(key),
-            getIdFromKey(key)
-        );
-        that.currentAdHocGroup = entity;
-
-        // Update title and breadcrumbs.
-        currentEntityName = that.locate('currentEntityName');
-        currentEntityName.text(entity.name);
-        currentEntityName.attr('key', getKey(entity));
-        updateBreadcrumbs(that, entity, 'breadcrumbs', browseEntity);
-
-        // Clear member tables.
-        content = that.locate('entityBrowserContent');
-        content.find('table').each(function () {
-            $(this).html('').hide();
-        });
-
-        // For each entity, create a member list item.
-        $.each(entity.children, function (index, object) {
-            var tdChild;
-            var tdButtons;
-            var divButtons;
-            var selButton;
-            var selIcon;
-            var tr;
-            var table;
-            var a;
-            var objectType;
-
-            objectType = object.entityType.toLowerCase();
-
-            // Create entity name/link.
-            if (objectType == 'person' || objectType == 'portlet') {
-                a = document.createElement('span');
-                a.textContent = object.name;
-            } else {
-                a = document.createElement('a');
-                a.href = 'javascript:;';
-                a.text = object.name;
-                a.setAttribute('key', getKey(object));
-            }
-            a.className = that.options.styles.memberLink;
-
-            // Create entity td.
-            tdChild = document.createElement('td');
-            tdChild.append(a);
-
-            // Create buttons, div and td.
-            selButton = document.createElement('button');
-            selButton.className = 'btn btn-select btn-success btn-xs';
-            selButton.setAttribute('key', getKey(object));
-            selButton.append(document.createTextNode('Add to Selection '));
-            selIcon = document.createElement('i');
-            selIcon.className = 'fa fa-plus-circle';
-            selButton.append(selIcon);
-            divButtons = document.createElement('div');
-            divButtons.className = 'btn-group pull-right';
-            divButtons.role = 'group';
-            divButtons.append(selButton);
-            tdButtons = document.createElement('td');
-            tdButtons.append(divButtons);
-            /*
-                 <button type="button" class="btn btn-info btn-xs">Edit Group <i class="fa fa-pencil"></i></button>
-                 <button type="button" class="btn btn-danger btn-xs">Delete Group <i class="fa fa-trash-o"></i></button>
-             */
-
-            // Create row and add to table.
-            tr = document.createElement('tr');
-            tr.append(tdChild);
-            tr.append(tdButtons);
-            table = content
-                .find('.' + objectType)
-                .find('.' + that.options.styles.memberList);
-            table.append(tr);
-            table.show();
-        }); // end:loop.
-
-        // Reset no-members.
-        that.container.find('.no-members').each(function (index, object) {
-            object = $(object);
-            if (object.parent().find('tr').size() > 0) {
-                object.hide();
-            } else {
-                object.show();
-            }
-        });
-
-        // Register click event on member list links.
-        content
-            .find('table')
-            .find('a')
-            .click(function () {
-                browseEntity(that, $(this).attr('key'));
-            }); // end:click.
-
-        // Set selection states.
-        updateSelectionStates(that);
-    }; // end:function.
-
-    /**
-     * Private. Renders 'selected' search items to the end user.
-     *
-     * @param {Object} that - reference to an instance of the up.entityselection component.
-     */
-    var updateSearchView = function (that) {
-        var list;
-
-        // Cache.
-        list = that.searchDropDown.find(that.options.selectors.searchResults);
-        list.find('.' + that.options.styles.selected).removeClass(
-            that.options.styles.selected
-        );
-
-        // Loop through selected array.
-        $.each(that.options.selected, function (index, object) {
-            var span = list.find('span[key="' + object + '"]');
-            span.parent().parent().addClass(that.options.styles.selected);
-        }); // end:loop.
-    }; // end:function.
-
-    /**
-     * Private. Determines which action, selection or deselection, executes.
-     *
-     * @param {Object} that - reference to an instance of the up.entityselection component.
-     * @param {String} key - reference to key attribute passed over when search link is clicked.
-     */
-    var itemSelectionHandler = function (that, key) {
-        // Cache.
-        var entity = that.registry.getEntity(
-            getTypeFromKey(key),
-            getIdFromKey(key)
-        );
-        console.log(entity);
-
-        // Selection.
-        if ($.inArray(key, that.options.selected) === -1) {
-            // Key does not exist.
-            selectEntity(that, getKey(entity));
-        } else {
-            // Key exists.
-            deselectEntity(that, getKey(entity));
-        } // end:if.
-
-        // Update UI.
-        updateSearchView(that);
-    }; // end:function.
-
-    /**
-     * Private. Search for a specific entity.
-     *
-     * @param {Object} that - reference to an instance of the up.entityselection component.
-     * @param {String} searchTerm - reference to search term.
-     */
-    var search = function (that, searchTerm) {
-        var entities;
-        var list;
-        var listItem;
-        var searchResultsNoMembers;
-        var members;
-
-        // Filter searchTerm.
-        if (searchTerm === that.options.messages.searchValue) {
-            searchTerm = '';
-        } // end:if.
-
-        // Cache.
-        entities = that.registry.searchEntities(
-            that.options.entityTypes,
-            searchTerm
-        );
-        list = that.searchDropDown.find(that.options.selectors.searchResults);
-        searchResultsNoMembers = that.locate('searchResultsNoMembers');
-        list.html('');
-        listItem = '';
-
-        // Loop through each entity. Build list items.
-        $.each(entities, function (index, object) {
-            listItem +=
-                '<li class="' +
-                object.entityType +
-                '"><a href="#" title="' +
-                object.name +
-                '"><span key="' +
-                getKey(object) +
-                '">' +
-                object.name +
-                '</span></a></li>';
-        }); // end:loop.
-        list.html(listItem);
-
-        // Assign default 'click' event.
-        list.find('a').bind('click', function () {
-            var span = $(this).find('span');
-            console.log(span.attr('key'));
-            itemSelectionHandler(that, span.attr('key'));
-        }); // end:listener.
-
-        // Render 'No Members' when list is empty.
-        members = list.find('li');
-        if (members.length === 0) {
-            searchResultsNoMembers.show();
-            list.hide();
-        } else {
-            list.show();
-            searchResultsNoMembers.hide();
-        }
-        // end:if.
-
-        // Update UI.
-        updateSearchView(that);
-
-        return false;
-    }; // end:function.
-
-    /**
-     * Private. Initializes search feature.
-     *
-     * @param {Object} that - reference to an instance of the up.entityselection component.
-     */
-    var searchEntity = function (that) {
-        var closeSearch;
-        var searchForm;
-        var searchField;
-        var searchDropDown;
-        var loader;
-
-        // Cache.
-        closeSearch = that.locate('closeSearch');
-        searchForm = that.locate('searchForm');
-        searchField = searchForm.find('input[type=search]');
-        loader = that.locate('searchLoader');
-        searchDropDown = that.locate('searchDropDown');
-
-        // Apply.
-        searchDropDown.css({top: searchField.outerHeight()});
-
-        // Binds 'submit' event.
-        searchForm.submit(function () {
-            up.showLoader(loader);
-            search(that, searchField.val());
-            searchDropDown.show();
-            up.hideLoader(loader);
-            return false;
-        }); // end:listener.
-
-        // Binds 'click' event to close button.
-        closeSearch.find('a').bind('click', function () {
-            searchDropDown.hide();
-        }); // end:listener.
-
-        // Binds 'click' event listener to the document. Detects a 'click'
-        // that occurs outside of the component.
-        $(document).bind('click', function (event) {
-            if (
-                that.isEmptyArray(
-                    $(event.target).parents('.' + that.options.styles.search)
-                )
-            ) {
-                searchDropDown.hide();
-            } // end:if.
-        }); // end:function.
-    }; // end:function.
-
-    var createTestMaps = function (groupNames, testAttribute) {
-        var tests = [];
-        $.each(groupNames, function (index, name) {
-            tests.push({
-                testValue: name,
-                attributeName: testAttribute,
-                testerClassName:
-                    'org.apereo.portal.groups.pags.testers.AdHocGroupTester',
-            });
-        });
-        return tests;
-    };
-
-    /**
-     * Private. Runs initialization functions.
-     *
-     * @param {Object} that - reference to an instance of the up.entityselection component.
-     */
-    var initialize = function (that) {
-        // Initialize search drop-down.
-        searchEntity(that);
-
-        that.locate('selectionBasket')
-            .find('a')
-            .click(function () {
-                deselectEntity(that, $(this).attr('key'));
-            }); // end:click.
-
-        // Browse to the designated start of ad hoc groups.
-        browseEntity(that, that.options.initialFocusedEntity);
-
-        if (that.options.enableAdHocGroups) {
-            var jsTreeIncludes = false;
-            var jsTreeExcludes = false;
-
-            var entityToJSTreeNode = function (entity) {
-                var childNodes = [];
-                $.each(entity.children, function (index, child) {
-                    if (child.entityType == 'GROUP') {
-                        childNodes.push({
-                            id: getKey(child),
-                            text: child.name,
-                            state: {loaded: false},
-                        });
-                    }
-                });
-                return {
-                    id: getKey(entity),
-                    text: entity.name,
-                    children: childNodes,
-                };
-            };
-
-            var callback = function (object, callback_) {
-                var key;
-                var entity;
-                var childNodes = [];
-                if (object.id === '#') {
-                    // root tree node, so send back initial node
-                    key = that.options.initialFocusedEntity;
-                    entity = that.registry.getEntity(
-                        getTypeFromKey(key),
-                        getIdFromKey(key)
-                    );
-                    childNodes.push(entityToJSTreeNode(entity));
-                } else {
-                    key = object.id;
-                    entity = that.registry.getEntity(
-                        getTypeFromKey(key),
-                        getIdFromKey(key)
-                    );
-                    $.each(entity.children, function (index, child) {
-                        if (child.entityType == 'GROUP') {
-                            childNodes.push(entityToJSTreeNode(child));
-                        }
-                    });
-                }
-                callback_.call(this, childNodes);
-            };
-
-            var displayResponseMessage = function (xmlhttp) {
-                console.log('display response message');
-                console.log(xmlhttp.responseText);
-                switch (xmlhttp.status) {
-                    case 200: // SC_OK
-                    case 201: // SC_CREATED
-                    case 202: {
-                        // SC_ACCEPTED
-                        $(that.options.selectors.alertSuccess).show();
-                        break;
-                    }
-                    case 400: {
-                        // SC_BAD_REQUEST -> bad parent
-                        $(that.options.selectors.alertInvalidParent).show();
-                        break;
-                    }
-                    case 409: {
-                        // SC_CONFLICT -> group exists
-                        $(that.options.selectors.alertGroupExists).show();
-                        break;
-                    }
-                    case 401: // SC_UNAUTHORIZED
-                    case 403: {
-                        // SC_FORBIDDEN
-                        $(that.options.selectors.alertUnauthorized).show();
-                        break;
-                    }
-                    default: {
-                        $(that.options.selectors.alertUnknown).show();
-                        break;
-                    }
-                }
-            };
-
-            that.locate('saveAdHocButton').bind('click', function () {
-                var parentKey;
-                var parentName;
-                var includes;
-                var excludes;
-                var tests;
-                var pagsGroup;
-                var json;
-                var xmlhttp;
-                parentKey = that.locate('currentEntityName').attr('key');
-                parentName = that.locate('currentEntityName').text();
-                includes = [];
-                that.locate('dataIncludesList')
-                    .find('li')
-                    .each(function () {
-                        includes.push($(this).text());
-                    });
-                excludes = [];
-                that.locate('dataExcludesList')
-                    .find('li')
-                    .each(function () {
-                        excludes.push($(this).text());
-                    });
-
-                tests = createTestMaps(includes, 'group-member');
-                tests = tests.concat(
-                    createTestMaps(excludes, 'not-group-member')
-                );
-                pagsGroup = {};
-                pagsGroup['name'] = $('#groupName').val();
-                pagsGroup['description'] = $('#groupDesc').val();
-                pagsGroup['testGroups'] = [{tests: tests}];
-                json = JSON.stringify(pagsGroup);
-                console.log(json);
-
-                xmlhttp = new XMLHttpRequest();
-                xmlhttp.addEventListener('readystatechange', function () {
-                    if (xmlhttp.readyState == 4) {
-                        if (xmlhttp.status >= 200 && xmlhttp.status <= 202) {
-                            that.registry.removeEntity(parentKey);
-                            browseEntity(that, parentKey);
-                        }
-                        displayResponseMessage(xmlhttp);
-                    }
-                });
-                xmlhttp.open(
-                    'POST',
-                    that.options.pagsApiUrl + parentName + '.json',
-                    true
-                );
-                xmlhttp.send(json);
-            });
-
-            $(that.options.selectors.adHocGroupsModal).on(
-                'show.bs.modal',
-                function () {
-                    $(that.options.selectors.alerts).hide();
-
-                    // Initialize jsTree widgets within this dialog only when shown and only once
-                    if (!jsTreeIncludes) {
-                        $(that.options.selectors.dialogIncludesTree).jstree({
-                            core: {
-                                data: callback,
-                            },
-                            checkbox: {
-                                keep_selected_style: false,
-                                three_state: false,
-                            },
-                            plugins: ['checkbox'],
-                        });
-                    }
-                    if (!jsTreeExcludes) {
-                        $(that.options.selectors.dialogExcludesTree).jstree({
-                            core: {
-                                data: callback,
-                            },
-                            checkbox: {
-                                keep_selected_style: false,
-                                three_state: false,
-                            },
-                            plugins: ['checkbox'],
-                        });
-                    }
-                }
-            );
-        } else {
-            that.locate('adHocCreate').hide();
-        }
-
-        // Disable primary button.
-        if (
-            that.options.selected.length === 0 &&
-            that.options.requireSelection
-        ) {
-            that.locate('buttonPrimary').attr('disabled', 'disabled');
-        } // end:if.
-    }; // end:function.
-
-    /**
-     * Creator function for the entityselection component.
-     *
-     * @param {Object} container - reference to DOM container.
-     * @param {Object} options - reference to configuration object.
-     */
-    up.entityselection = function (container, options) {
-        var that;
-
-        // Initialize component & cache globals.
-        that = fluid.initView('up.entityselection', container, options);
-        that.selectMultiple = that.options.selectMultiple;
-        that.searchDropDown = that.locate('searchDropDown');
-
-        that.registry = fluid.initSubcomponent(that, 'entityRegistry', [
-            container,
-            fluid.COMPONENT_OPTIONS,
-        ]);
-
-        /**
-         * Public. Checks passed array's length property.
-         * If the length of the array is 0 the array is
-         * empty. Returns true if the array is empty.
-         *
-         * @param {Object} arr - reference to passed array object.
-         */
-        that.isEmptyArray = function (array) {
-            return array.length > 0 ? false : true;
-        }; // end:function.
-
-        initialize(that);
-        return that;
-    }; // end:component.
-
-    // Defaults.
-    fluid.defaults('up.entityselection', {
-        entityRegistry: {
-            type: 'up.EntityRegistry',
-        },
-        entityTypes: [],
-        selected: [],
-        initialFocusedEntity: 'group:local.0',
-        enableAdHocGroups: false,
-        selectMultiple: true,
-        requireSelection: true,
-        pagsApiUrl: '/api/v4-3/pags/',
-        selectors: {
-            alerts: '.alert',
-            alertSuccess: '#alertSuccess',
-            alertInvalidParent: '#alertInvalidParent',
-            alertGroupExists: '#alertGroupExists',
-            alertUnauthorized: '#alertUnauthorized',
-            alertUnknown: '#alertUnknown',
-            selectionBasket: '#selectionBasket',
-            breadcrumbs: '#entityBrowsingBreadcrumbs',
-            currentEntityName: '#currentEntityName',
-            entityBrowserContent: '#entityBrowserContent',
-            closeSearch: 'closeDropDown',
-            searchForm: '#searchForm',
-            searchDropDown: '#searchDropDown',
-            searchResults: '#searchResults',
-            searchResultsNoMembers: '#searchResultsNoMembers',
-            searchLoader: 'searchLoader',
-            currentSelectBtn: '#currentSelectBtn',
-            adHocCreate: '#adHocCreate',
-            adHocGroupsModal: '#adhocGroupModal',
-            dialogIncludesTree: '#dataIncludes',
-            dataIncludesList: '#dataIncludesList',
-            dialogExcludesTree: '#dataExcludes',
-            dataExcludesList: '#dataExcludesList',
-            saveAdHocButton: '#saveAdHocButton',
-            buttonPrimary: '#buttonPrimary',
-        },
-        styles: {
-            memberList: 'member-list',
-            memberLink: 'member-link',
-            selection: 'selection',
-            selected: 'selected',
-            last: 'last',
-            title: 'title',
-            search: 'portlet-search',
-        },
-        messages: {
-            selectButtonMessage: '',
-            deselectButtonMessage: '',
-            removeCrumb: '',
-            removeSelection: '',
-            addSelection: '',
-            selected: '',
-            nothingSelected: '',
-            searchValue: '',
-        },
-    });
-})(jQuery, fluid);
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/flyout-nav.js b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/flyout-nav.js
deleted file mode 100755
index b6b1897fb3a..00000000000
--- a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/flyout-nav.js
+++ /dev/null
@@ -1,151 +0,0 @@
-/*
- * Licensed to Apereo under one or more contributor license
- * agreements. See the NOTICE file distributed with this work
- * for additional information regarding copyright ownership.
- * Apereo licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file
- * except in compliance with the License.  You may obtain a
- * copy of the License at the following location:
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-var uportal = uportal || {};
-
-(function ($, fluid) {
-    /**
-     * Initialize the flyout menu item
-     */
-    var init = function (that) {
-        zIndexWorkaround(that);
-
-        // set the mouseover event
-        $(that.container).mouseover(function () {
-            var tab;
-            var flyout;
-            var flyoutList;
-            var foTop;
-            var foLeft;
-
-            // Cache DOM elements.
-            tab = $(this);
-            flyout = that.locate('flyoutMenu');
-            flyoutList = that.locate('flyoutList');
-
-            // Only open flyout if it contains content.
-            if (flyoutList.html() !== '') {
-                that.openFlyout();
-            } // end:if.
-
-            // Horizontal.
-            if (that.options.orientation === 'horizontal') {
-                // Left.
-                foLeft =
-                    that.options.horzalign === 'left'
-                        ? 0
-                        : tab.outerWidth() - flyout.outerWidth(); // end:if.
-
-                // Bottom.
-                foTop =
-                    that.options.vertalign === 'bottom'
-                        ? tab.outerHeight() - that.options.offset
-                        : flyout.outerHeight() * -1; // end:if.
-            } else {
-                // Left.
-                foLeft =
-                    that.options.horzalign === 'left'
-                        ? flyout.outerWidth() * -1
-                        : tab.outerWidth(); // end:if.
-
-                // Bottom.
-                foTop =
-                    that.options.vertalign === 'bottom'
-                        ? 0
-                        : (flyout.outerHeight() - tab.outerHeight()) * -1; // end:if.
-            } // end:if.
-
-            // set the mouseout event
-            $(that.container).mouseout(function () {
-                that.closeFlyout();
-            });
-
-            // use the bgiframe plugin to ensure flyouts appear on top of
-            // form elements in earlier versions of IE
-            flyout
-                .css({
-                    top: foTop,
-                    left: foLeft,
-                })
-                .bgiframe();
-        });
-    };
-
-    /**
-     * Provide fix for z-index layering issues in older IE browsers
-     *
-     * From http://richa.avasthi.name/blogs/tepumpkin/2008/01/11/ie7-lessons-learned/
-     */
-    var zIndexWorkaround = function (that) {
-        if ($.browser.msie && $.browser.version === '7.0') {
-            // Iterate over the parents of the flyout containers
-            that.locate('flyoutMenu')
-                .parents()
-                .each(function () {
-                    var p = $(this);
-                    var pos = p.css('position');
-
-                    // If it's positioned,
-                    if (
-                        pos == 'relative' ||
-                        pos == 'absolute' ||
-                        pos == 'fixed'
-                    ) {
-                        /*
-                         * Add the "on-top" class name This class is defined in:
-                         * uportal-war/src/main/webapp/media/skins/universality/common/css/layout-portal.css
-                         */
-                        $(this).addClass(that.options.styles.onTop);
-                    }
-                });
-        } // end:if. // end:if.
-    };
-
-    /**
-     * Create a new flyout menu component
-     */
-    uportal.flyoutmenu = function (container, options) {
-        var that = fluid.initView('uportal.flyoutmenu', container, options);
-
-        // initialize the flyout menu
-        init(that);
-
-        that.openFlyout = function () {
-            that.locate('flyoutMenu').show();
-        };
-
-        that.closeFlyout = function () {
-            that.locate('flyoutMenu').hide();
-        };
-    };
-
-    // defaults
-    fluid.defaults('uportal.flyoutmenu', {
-        orientation: 'horizontal',
-        horzalign: 'left',
-        vertalign: 'bottom',
-        offset: 0,
-        selectors: {
-            flyoutMenu: '.portal-flyout-container',
-            flyoutList: '.portal-subnav-list',
-        },
-        styles: {
-            onTop: 'on-top',
-        },
-    });
-})(jQuery, fluid);
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-autocomplete.js b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-autocomplete.js
new file mode 100644
index 00000000000..4979228b66a
--- /dev/null
+++ b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-autocomplete.js
@@ -0,0 +1,296 @@
+/*
+ * Modern replacement for Fluid-based AutoComplete component
+ * Replaces up-autocomplete.js with vanilla JavaScript implementation
+ */
+'use strict';
+
+class ModernAutoComplete {
+    constructor(container, options = {}) {
+        this.container = typeof container === 'string' ? document.querySelector(container) : container;
+        this.options = {
+            initialText: '',
+            searchFunction: null,
+            minLength: 1,
+            delay: 300,
+            ...options
+        };
+        
+        this.state = {
+            currentValue: null,
+            isOpen: false,
+            searchTimeout: null
+        };
+        
+        this.init();
+    }
+    
+    init() {
+        this.cacheElements();
+        this.bindEvents();
+        this.setupInitialState();
+    }
+    
+    cacheElements() {
+        this.elements = {
+            input: this.container.querySelector('.up-autocomplete-searchterm'),
+            dropdown: this.container.querySelector('.up-autocomplete-dropdown'),
+            close: this.container.querySelector('.up-autocomplete-close'),
+            matches: this.container.querySelector('.up-autocomplete-matches'),
+            matchTemplate: this.container.querySelector('.up-autocomplete-match'),
+            loadingMessage: this.container.querySelector('.up-autocomplete-loading'),
+            noResultsMessage: this.container.querySelector('.up-autocomplete-noresults')
+        };
+    }
+    
+    bindEvents() {
+        if (this.elements.input) {
+            this.elements.input.addEventListener('input', this.handleInput.bind(this));
+            this.elements.input.addEventListener('focus', this.handleFocus.bind(this));
+            this.elements.input.addEventListener('blur', this.handleBlur.bind(this));
+            this.elements.input.addEventListener('keydown', this.handleKeydown.bind(this));
+        }
+        
+        if (this.elements.close) {
+            this.elements.close.addEventListener('click', (e) => {
+                e.preventDefault();
+                this.hideDropdown();
+            });
+        }
+        
+        // Close dropdown when clicking outside
+        document.addEventListener('click', (e) => {
+            if (!this.container.contains(e.target)) {
+                this.hideDropdown();
+            }
+        });
+    }
+    
+    setupInitialState() {
+        if (this.elements.input && this.options.initialText) {
+            this.elements.input.value = this.options.initialText;
+        }
+        
+        if (this.elements.dropdown) {
+            this.elements.dropdown.style.display = 'none';
+        }
+    }
+    
+    handleInput(e) {
+        const query = e.target.value.trim();
+        
+        // Clear previous timeout
+        if (this.state.searchTimeout) {
+            clearTimeout(this.state.searchTimeout);
+        }
+        
+        // Remove valid input class
+        this.elements.input.classList.remove('up-autocomplete-validinput');
+        this.state.currentValue = null;
+        
+        if (query.length >= this.options.minLength && query !== this.options.initialText) {
+            // Debounce search
+            this.state.searchTimeout = setTimeout(() => {
+                this.performSearch(query);
+            }, this.options.delay);
+        } else {
+            this.hideDropdown();
+        }
+    }
+    
+    handleFocus(e) {
+        const value = e.target.value;
+        if (value === this.options.initialText) {
+            e.target.value = '';
+        }
+    }
+    
+    handleBlur(e) {
+        // Delay to allow click events on dropdown items
+        setTimeout(() => {
+            const value = e.target.value.trim();
+            if (value === '') {
+                e.target.value = this.options.initialText;
+            }
+        }, 150);
+    }
+    
+    handleKeydown(e) {
+        if (!this.state.isOpen) return;
+        
+        const items = this.elements.matches.querySelectorAll('.up-autocomplete-match:not([style*="display: none"])');
+        let currentIndex = -1;
+        
+        // Find currently selected item
+        items.forEach((item, index) => {
+            if (item.classList.contains('selected')) {
+                currentIndex = index;
+            }
+        });
+        
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                this.selectItem(items, currentIndex + 1);
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                this.selectItem(items, currentIndex - 1);
+                break;
+            case 'Enter':
+                e.preventDefault();
+                if (currentIndex >= 0 && items[currentIndex]) {
+                    const link = items[currentIndex].querySelector('.up-autocomplete-match-link');
+                    if (link) link.click();
+                }
+                break;
+            case 'Escape':
+                e.preventDefault();
+                this.hideDropdown();
+                break;
+        }
+    }
+    
+    selectItem(items, index) {
+        // Remove previous selection
+        items.forEach(item => item.classList.remove('selected'));
+        
+        // Add selection to new item
+        if (index >= 0 && index < items.length) {
+            items[index].classList.add('selected');
+            items[index].scrollIntoView({ block: 'nearest' });
+        }
+    }
+    
+    async performSearch(query) {
+        if (!this.options.searchFunction) return;
+        
+        this.showLoading();
+        
+        try {
+            const results = await this.options.searchFunction(query);
+            this.renderResults(results);
+        } catch (error) {
+            console.error('AutoComplete search error:', error);
+            this.showNoResults();
+        }
+    }
+    
+    renderResults(results) {
+        // Always clear existing matches first
+        this.elements.matches.innerHTML = '';
+        
+        if (!results || results.length === 0) {
+            this.showNoResults();
+            return;
+        }
+        
+        results.forEach(result => {
+            const matchEl = this.createMatchElement(result);
+            this.elements.matches.appendChild(matchEl);
+        });
+        
+        this.showDropdown();
+        this.hideLoading();
+        this.hideNoResults();
+    }
+    
+    createMatchElement(result) {
+        const matchEl = this.elements.matchTemplate.cloneNode(true);
+        matchEl.style.display = '';
+        
+        const textEl = matchEl.querySelector('.up-autocomplete-match-text');
+        const linkEl = matchEl.querySelector('.up-autocomplete-match-link');
+        
+        if (textEl) {
+            textEl.textContent = result.text;
+        }
+        
+        if (linkEl) {
+            linkEl.title = result.text;
+            linkEl.addEventListener('click', (e) => {
+                e.preventDefault();
+                this.selectResult(result);
+            });
+        }
+        
+        return matchEl;
+    }
+    
+    selectResult(result) {
+        this.elements.input.value = result.text;
+        this.state.currentValue = result.value;
+        this.elements.input.classList.add('up-autocomplete-validinput');
+        this.hideDropdown();
+        
+        // Trigger change event
+        this.elements.input.dispatchEvent(new Event('change', { bubbles: true }));
+    }
+    
+    showDropdown() {
+        if (this.elements.dropdown) {
+            this.elements.dropdown.style.display = 'block';
+            this.state.isOpen = true;
+        }
+    }
+    
+    hideDropdown() {
+        if (this.elements.dropdown) {
+            this.elements.dropdown.style.display = 'none';
+            this.state.isOpen = false;
+        }
+    }
+    
+    showLoading() {
+        if (this.elements.loadingMessage) {
+            this.elements.loadingMessage.style.display = 'block';
+        }
+        this.showDropdown();
+    }
+    
+    hideLoading() {
+        if (this.elements.loadingMessage) {
+            this.elements.loadingMessage.style.display = 'none';
+        }
+    }
+    
+    showNoResults() {
+        if (this.elements.noResultsMessage) {
+            this.elements.noResultsMessage.style.display = 'block';
+        }
+        this.showDropdown();
+        this.hideLoading();
+    }
+    
+    hideNoResults() {
+        if (this.elements.noResultsMessage) {
+            this.elements.noResultsMessage.style.display = 'none';
+        }
+    }
+    
+    getValue() {
+        return this.state.currentValue;
+    }
+    
+    setValue(value, text) {
+        this.state.currentValue = value;
+        if (this.elements.input) {
+            this.elements.input.value = text || value;
+            this.elements.input.classList.add('up-autocomplete-validinput');
+        }
+    }
+    
+    clear() {
+        this.state.currentValue = null;
+        if (this.elements.input) {
+            this.elements.input.value = this.options.initialText;
+            this.elements.input.classList.remove('up-autocomplete-validinput');
+        }
+        this.hideDropdown();
+    }
+}
+
+// Global initialization function to replace Fluid component
+window.up = window.up || {};
+window.up.Autocomplete = function(container, options) {
+    return new ModernAutoComplete(container, options);
+};
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-config-lightbox.js b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-config-lightbox.js
new file mode 100644
index 00000000000..803a7866db2
--- /dev/null
+++ b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-config-lightbox.js
@@ -0,0 +1,205 @@
+/*
+ * Modern replacement for configuration lightbox functionality
+ * Replaces up-config-lightbox.js with vanilla JavaScript implementation
+ */
+'use strict';
+
+class ModernConfigLightbox {
+    constructor(options = {}) {
+        this.options = {
+            selectors: {
+                editLinks: '[data-lightbox-url]',
+                lightbox: '#config-lightbox',
+                title: '#config-lightbox .modal-title',
+                loading: '#config-lightbox .loading',
+                content: '#config-lightbox .modal-body-content'
+            },
+            lightboxOptions: {
+                backdrop: 'static',
+                show: true
+            },
+            ...options
+        };
+        
+        this.modal = null;
+        this.init();
+    }
+
+    init() {
+        this.bindEvents();
+    }
+
+    bindEvents() {
+        document.addEventListener('click', (event) => {
+            const link = event.target.closest(this.options.selectors.editLinks);
+            if (!link) return;
+
+            event.preventDefault();
+            event.stopPropagation();
+
+            this.openLightbox(link);
+        });
+    }
+
+    async openLightbox(link) {
+        const url = link.dataset.lightboxUrl;
+        const title = link.dataset.lightboxTitle;
+
+        if (!url) {
+            console.error('No lightbox URL found');
+            return;
+        }
+
+        // Set title if provided
+        if (title) {
+            const titleElement = document.querySelector(this.options.selectors.title);
+            if (titleElement) {
+                titleElement.textContent = title;
+            }
+        }
+
+        // Show loading, hide content
+        const loadingElement = document.querySelector(this.options.selectors.loading);
+        const contentElement = document.querySelector(this.options.selectors.content);
+        
+        if (contentElement) contentElement.style.display = 'none';
+        if (loadingElement) loadingElement.style.display = 'block';
+
+        // Show modal
+        const lightboxElement = document.querySelector(this.options.selectors.lightbox);
+        if (lightboxElement) {
+            this.modal = new bootstrap.Modal(lightboxElement, this.options.lightboxOptions);
+            this.modal.show();
+        }
+
+        try {
+            const content = await this.loadContent(url);
+            this.processContent(content);
+            
+            // Hide loading, show content
+            if (loadingElement) {
+                loadingElement.style.opacity = '0';
+                loadingElement.style.transition = 'opacity 0.3s';
+                setTimeout(() => {
+                    loadingElement.style.display = 'none';
+                    loadingElement.style.opacity = '1';
+                }, 300);
+            }
+            
+            if (contentElement) {
+                contentElement.style.display = 'block';
+                contentElement.style.opacity = '0';
+                contentElement.style.transition = 'opacity 0.3s';
+                setTimeout(() => {
+                    contentElement.style.opacity = '1';
+                }, 50);
+            }
+        } catch (error) {
+            console.error('Error loading lightbox content:', error);
+            // Fallback to classic inline method
+            window.location.href = link.href;
+        }
+    }
+
+    async loadContent(url) {
+        const response = await fetch(url, {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'text/html'
+            }
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+
+        return await response.text();
+    }
+
+    processContent(content) {
+        const contentElement = document.querySelector(this.options.selectors.content);
+        if (!contentElement) return;
+
+        // Create temporary container to process HTML
+        const tempDiv = document.createElement('div');
+        tempDiv.innerHTML = content;
+
+        // Rewrite form action URLs
+        tempDiv.querySelectorAll('form').forEach(form => {
+            const action = form.getAttribute('action');
+            if (action) {
+                form.setAttribute('action', this.convertExclusiveUrlToPageUrl(action));
+            }
+        });
+
+        // Rewrite link href URLs
+        tempDiv.querySelectorAll('a').forEach(link => {
+            const href = link.getAttribute('href');
+            if (href) {
+                link.setAttribute('href', this.convertExclusiveUrlToPageUrl(href));
+            }
+        });
+
+        // Clear content and append processed HTML
+        contentElement.innerHTML = '';
+        contentElement.appendChild(tempDiv);
+    }
+
+    convertExclusiveUrlToPageUrl(url) {
+        if (!url) return url;
+
+        let newUrl = url;
+        let currentPagePortletId = null;
+        let portletId = null;
+        let state = 'normal';
+
+        // Extract current page portlet ID
+        const currentMatches = /\/p\/([^/]+)\//.exec(window.location.pathname);
+        if (currentMatches && currentMatches[1]) {
+            currentPagePortletId = currentMatches[1];
+        }
+
+        // Extract URL portlet ID
+        const urlMatches = /\/p\/([^/]+)\//.exec(url);
+        if (urlMatches && urlMatches[1]) {
+            portletId = urlMatches[1];
+        }
+
+        // Try to retain state if editing the same portlet
+        if (currentPagePortletId && portletId === currentPagePortletId) {
+            const stateMatches = /\/(normal|maximized|exclusive|detached)\/render\.uP/.exec(
+                window.location.pathname
+            );
+            if (stateMatches && stateMatches[1]) {
+                state = stateMatches[1];
+            }
+        }
+
+        // Replace exclusive state with determined state
+        newUrl = url.replace('/exclusive/', `/${state}/`);
+
+        return newUrl;
+    }
+
+    hide() {
+        if (this.modal) {
+            this.modal.hide();
+        }
+    }
+}
+
+// Global initialization
+window.up = window.up || {};
+window.up.lightboxConfig = {
+    init: function(options) {
+        if (!window.up.modernConfigLightbox) {
+            window.up.modernConfigLightbox = new ModernConfigLightbox(options);
+        }
+        return window.up.modernConfigLightbox;
+    }
+};
+
+// Auto-initialize with default options
+document.addEventListener('DOMContentLoaded', () => {
+    window.up.lightboxConfig.init();
+});
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-entity-selector.js b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-entity-selector.js
new file mode 100644
index 00000000000..4a487a5e46d
--- /dev/null
+++ b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-entity-selector.js
@@ -0,0 +1,629 @@
+/*
+ * Modern replacement for Fluid EntitySelector - follows original logic exactly
+ */
+'use strict';
+
+class ModernEntitySelector {
+    constructor(container, options = {}) {
+        this.container = container;
+        this.options = {
+            entityTypes: [],
+            selected: [],
+            initialFocusedEntity: 'GROUP:local.0',
+            selectMultiple: true,
+            entitiesUrl: '/uPortal/api/entities',
+            selectors: {
+                selectionBasket: '#selectionBasket',
+                breadcrumbs: '#entityBreadcrumbs',
+                currentEntityName: '#currentEntityName',
+                entityBrowserContent: '#entityBrowserContent',
+                searchForm: '#searchForm',
+                searchDropDown: '#searchDropDown',
+                searchResults: '#searchResults',
+                searchResultsNoMembers: '#searchResultsNoMembers',
+                currentSelectBtn: '#currentSelectBtn',
+                buttonPrimary: '#buttonPrimary'
+            },
+            ...options
+        };
+        
+        this.currentEntity = null;
+        this.entities = new Map();
+        
+        container._modernEntitySelector = this;
+        this.init();
+    }
+    
+    async init() {
+        this.setupSearch();
+        this.setupCurrentEntityButton();
+        this.fixModalDisplay();
+        await this.browseEntity(this.options.initialFocusedEntity);
+    }
+    
+    fixModalDisplay() {
+        // Fix Bootstrap modal display issues
+        const modal = document.querySelector('#adhocGroupModal');
+        if (modal) {
+            modal.addEventListener('shown.bs.modal', () => {
+                // Ensure modal is visible when shown
+                modal.style.opacity = '1';
+                modal.style.visibility = 'visible';
+                const dialog = modal.querySelector('.modal-dialog');
+                if (dialog) {
+                    dialog.style.transform = 'translate(0, 0)';
+                }
+                
+                // Initialize jsTree widgets if not already done
+                this.initializeJSTrees();
+            });
+        }
+    }
+    
+    initializeJSTrees() {
+        const $ = up.jQuery;
+        const includesTree = $('[id$="dataIncludes"]');
+        const excludesTree = $('[id$="dataExcludes"]');
+        
+        // Only initialize if not already done
+        if (includesTree.length && !includesTree.jstree(true)) {
+            includesTree.jstree({
+                core: {
+                    data: (obj, callback) => {
+                        this.getJSTreeData(obj, callback);
+                    }
+                },
+                checkbox: {
+                    keep_selected_style: false,
+                    three_state: false
+                },
+                plugins: ['checkbox']
+            });
+        }
+        
+        if (excludesTree.length && !excludesTree.jstree(true)) {
+            excludesTree.jstree({
+                core: {
+                    data: (obj, callback) => {
+                        this.getJSTreeData(obj, callback);
+                    }
+                },
+                checkbox: {
+                    keep_selected_style: false,
+                    three_state: false
+                },
+                plugins: ['checkbox']
+            });
+        }
+        
+        // Setup form submission
+        this.setupAdHocForm();
+    }
+    
+    getJSTreeData(obj, callback) {
+        // Provide jsTree data (like original Fluid code)
+        if (obj.id === '#') {
+            // Root node - return initial entity
+            const entity = this.currentEntity || this.entities.get(this.options.initialFocusedEntity);
+            if (entity) {
+                callback([{
+                    id: `${entity.entityType}:${entity.id}`,
+                    text: entity.name,
+                    children: entity.children ? entity.children.filter(c => c.entityType === 'GROUP').map(c => ({
+                        id: `${c.entityType}:${c.id}`,
+                        text: c.name,
+                        state: { loaded: false }
+                    })) : []
+                }]);
+            } else {
+                callback([]);
+            }
+        } else {
+            // Child node - get entity children
+            const entity = this.entities.get(obj.id);
+            if (entity && entity.children) {
+                const children = entity.children.filter(c => c.entityType === 'GROUP').map(c => ({
+                    id: `${c.entityType}:${c.id}`,
+                    text: c.name,
+                    children: c.children ? c.children.filter(gc => gc.entityType === 'GROUP').length > 0 : false
+                }));
+                callback(children);
+            } else {
+                callback([]);
+            }
+        }
+    }
+    
+    setupCurrentEntityButton() {
+        const currentSelectBtn = this.container.querySelector('#currentSelectBtn') || 
+                                document.querySelector(this.options.selectors.currentSelectBtn);
+        if (currentSelectBtn) {
+            currentSelectBtn.addEventListener('click', (e) => {
+                e.preventDefault();
+                const currentEntityName = this.container.querySelector('#currentEntityName') ||
+                                         document.querySelector(this.options.selectors.currentEntityName);
+                const key = currentEntityName?.getAttribute('key');
+                if (key) {
+                    this.selectEntity(key);
+                }
+            });
+        }
+    }
+    
+    setupSearch() {
+        const searchForm = this.container.querySelector('form');
+        const searchDropDown = this.container.querySelector('.search-dropdown');
+        
+        if (searchForm) {
+            searchForm.addEventListener('submit', (e) => {
+                e.preventDefault();
+                const searchInput = searchForm.querySelector('input[type="search"]');
+                if (searchInput) {
+                    this.performSearch(searchInput.value.trim());
+                }
+            });
+        }
+        
+        // Close search dropdown when clicking close button (like Fluid)
+        const closeSearch = this.container.querySelector('.search-close a');
+        if (closeSearch) {
+            closeSearch.addEventListener('click', (e) => {
+                e.preventDefault();
+                searchDropDown.style.display = 'none';
+            });
+        }
+        
+        // Close dropdown when clicking outside (like Fluid)
+        document.addEventListener('click', (e) => {
+            if (!e.target.closest('.portlet-search')) {
+                searchDropDown.style.display = 'none';
+            }
+        });
+    }
+    
+    async performSearch(query) {
+        const searchDropDown = this.container.querySelector('.search-dropdown');
+        const resultsList = this.container.querySelector('.search-list');
+        const noResults = this.container.querySelector('.portlet-msg');
+        
+        if (!query) {
+            searchDropDown.style.display = 'none';
+            return;
+        }
+        
+        try {
+            // Use same search logic as ModernAutoComplete
+            const params = new URLSearchParams();
+            params.append('q', query);
+            this.options.entityTypes.forEach(type => {
+                params.append('entityType[]', type.toUpperCase());
+            });
+            
+            const response = await fetch(`${this.options.entitiesUrl}.json?${params.toString()}`);
+            if (!response.ok) throw new Error(`HTTP ${response.status}`);
+            
+            const data = await response.json();
+            const results = data.jsonEntityBeanList || [];
+            
+            // Clear and populate results (exactly like Fluid)
+            resultsList.innerHTML = '';
+            
+            if (results.length === 0) {
+                noResults.style.display = 'block';
+                resultsList.style.display = 'none';
+            } else {
+                noResults.style.display = 'none';
+                resultsList.style.display = 'block';
+                
+                results.forEach(entity => {
+                    const entityType = entity.entityType.toLowerCase();
+                    const key = `${entity.entityType}:${entity.id}`;
+                    this.entities.set(key, entity);
+                    
+                    const li = document.createElement('li');
+                    li.className = entityType;
+                    li.innerHTML = `<a href="#" title="${entity.name}"><span key="${key}">${entity.name}</span></a>`;
+                    
+                    const link = li.querySelector('a');
+                    link.addEventListener('click', (e) => {
+                        e.preventDefault();
+                        this.selectEntity(key);
+                        this.updateSearchSelectionStates();
+                    });
+                    
+                    resultsList.appendChild(li);
+                });
+                
+                this.updateSearchSelectionStates();
+            }
+            
+            searchDropDown.style.display = 'block';
+        } catch (error) {
+            console.error('Search error:', error);
+            noResults.style.display = 'block';
+            resultsList.style.display = 'none';
+            searchDropDown.style.display = 'block';
+        }
+        
+        // Hide any loading spinners
+        const loader = this.container.querySelector('.search-loader');
+        if (loader) {
+            loader.style.display = 'none';
+        }
+    }
+    
+    updateSearchSelectionStates() {
+        const resultsList = this.container.querySelector('.search-list');
+        if (!resultsList) return;
+        
+        resultsList.querySelectorAll('li').forEach(li => {
+            const span = li.querySelector('span');
+            const key = span?.getAttribute('key');
+            if (key && this.options.selected.includes(key)) {
+                li.classList.add('selected');
+            } else {
+                li.classList.remove('selected');
+            }
+        });
+    }
+    
+    async browseEntity(key) {
+        const entity = await this.loadEntity(key);
+        if (!entity) return;
+        
+        this.currentEntity = entity;
+        
+        // Update current entity name (exactly like Fluid)
+        const currentEntityName = document.querySelector(this.options.selectors.currentEntityName);
+        if (currentEntityName) {
+            currentEntityName.textContent = entity.name;
+            currentEntityName.setAttribute('key', key);
+        }
+        
+        // Clear all tables (exactly like Fluid)
+        const content = document.querySelector(this.options.selectors.entityBrowserContent);
+        content.querySelectorAll('table').forEach(table => {
+            table.innerHTML = '';
+            table.style.display = 'none';
+        });
+        
+        // For each child entity, create table row (exactly like Fluid)
+        // Show ALL entity types for navigation, but disable selection for disallowed types
+        entity.children?.forEach(child => {
+            const objectType = child.entityType.toLowerCase();
+            const isAllowedType = this.options.entityTypes.includes(objectType);
+            const childKey = `${child.entityType}:${child.id}`;
+            
+            // Create row elements (exactly like Fluid)
+            const tr = document.createElement('tr');
+            
+            // Create entity name cell
+            const tdChild = document.createElement('td');
+            let a;
+            if (objectType === 'person' || objectType === 'portlet') {
+                a = document.createElement('span');
+                a.textContent = child.name;
+            } else {
+                a = document.createElement('a');
+                a.href = 'javascript:;';
+                a.textContent = child.name;
+                a.setAttribute('key', childKey);
+                a.addEventListener('click', () => this.browseEntity(childKey));
+            }
+            a.className = 'member-link';
+            tdChild.appendChild(a);
+            
+            // Create button cell
+            const tdButtons = document.createElement('td');
+            const divButtons = document.createElement('div');
+            divButtons.className = 'btn-group pull-right';
+            divButtons.setAttribute('role', 'group');
+            
+            const selButton = document.createElement('button');
+            selButton.setAttribute('key', childKey);
+            
+            if (isAllowedType) {
+                selButton.className = 'btn btn-select btn-success btn-sm';
+                selButton.innerHTML = 'Add to Selection <i class="fa fa-plus-circle"></i>';
+                selButton.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    this.selectEntity(childKey);
+                });
+            } else {
+                selButton.className = 'btn btn-secondary btn-sm';
+                selButton.innerHTML = 'Cannot Select <i class="fa fa-ban"></i>';
+                selButton.disabled = true;
+            }
+            
+            divButtons.appendChild(selButton);
+            tdButtons.appendChild(divButtons);
+            
+            tr.appendChild(tdChild);
+            tr.appendChild(tdButtons);
+            
+            // Find table by entity type and append row (exactly like Fluid)
+            const table = content.querySelector(`.${objectType} .member-list`);
+            if (table) {
+                table.appendChild(tr);
+                table.style.display = 'table';
+            }
+        });
+        
+        // Update no-members messages (exactly like Fluid)
+        content.querySelectorAll('.no-members').forEach(noMembers => {
+            const parent = noMembers.parentElement;
+            const table = parent.querySelector('table');
+            const hasRows = table && table.querySelectorAll('tr').length > 0;
+            noMembers.style.display = hasRows ? 'none' : 'block';
+        });
+        
+        // Update button states after rendering
+        this.updateButtonStates();
+        this.updateCurrentEntityButton();
+        this.updateSearchSelectionStates();
+        
+        // Cache current entity for jsTree
+        this.currentEntity = entity;
+    }
+    
+    updateCurrentEntityButton() {
+        const currentSelectBtn = this.container.querySelector('#currentSelectBtn') ||
+                                document.querySelector(this.options.selectors.currentSelectBtn);
+        const currentEntityName = this.container.querySelector('#currentEntityName') ||
+                               document.querySelector(this.options.selectors.currentEntityName);
+        
+        if (currentSelectBtn && currentEntityName) {
+            const key = currentEntityName.getAttribute('key');
+            if (key) {
+                const [entityType] = key.split(':');
+                const isAllowedType = this.options.entityTypes.includes(entityType.toLowerCase());
+                
+                if (!isAllowedType) {
+                    // Hide button for disallowed entity types
+                    currentSelectBtn.style.display = 'none';
+                    return;
+                }
+                
+                currentSelectBtn.style.display = 'inline-block';
+                const isSelected = this.options.selected.includes(key);
+                
+                if (isSelected) {
+                    currentSelectBtn.innerHTML = 'Remove from Selection <i class="fa fa-minus-circle"></i>';
+                    currentSelectBtn.className = 'btn btn-danger btn-sm';
+                } else {
+                    currentSelectBtn.innerHTML = 'Add to Selection <i class="fa fa-plus-circle"></i>';
+                    currentSelectBtn.className = 'btn btn-success btn-sm';
+                }
+            }
+        }
+    }
+    
+    async loadEntity(key) {
+        if (this.entities.has(key)) return this.entities.get(key);
+        
+        const [type, id] = key.split(':');
+        
+        try {
+            const url = `${this.options.entitiesUrl}/${type}/${id}.json`;
+            const response = await fetch(url);
+            if (!response.ok) throw new Error(`HTTP ${response.status}`);
+            
+            const data = await response.json();
+            const entity = data.jsonEntityBean;
+            if (entity) this.entities.set(key, entity);
+            return entity;
+        } catch (error) {
+            console.error('Load entity error:', error);
+            return null;
+        }
+    }
+    
+    async selectEntity(key) {
+        if (!this.options.selected.includes(key)) {
+            this.options.selected.push(key);
+            const entity = await this.loadEntity(key);
+            if (entity && entity.id && entity.name && entity.entityType) {
+                this.addToSelectionBasket(entity, key);
+            } else {
+                console.error('Entity invalid or failed to load:', { key, entity });
+                this.options.selected.pop();
+                alert('Failed to load entity data. Please try again.');
+            }
+        }
+        this.updateButtonStates();
+    }
+    
+    addToSelectionBasket(entity, key) {
+        if (!entity || !entity.id || !entity.name) {
+            console.error('Entity missing required fields:', { entity });
+            return;
+        }
+        
+        const basket = document.querySelector(this.options.selectors.selectionBasket);
+        if (!basket) { console.error('Selection basket not found!'); return; }
+        
+        const ul = basket.querySelector('ul');
+        if (!ul) { console.error('UL element not found in basket!'); return; }
+        
+        const li = document.createElement('li');
+        li.innerHTML = `
+            <a href="#" key="${key}">${entity.name}</a>
+            <input type="hidden" name="groups" value="${key}"/>
+        `;
+        
+        li.querySelector('a').addEventListener('click', (e) => {
+            e.preventDefault();
+            this.deselectEntity(key);
+        });
+        
+        ul.appendChild(li);
+    }
+    
+    deselectEntity(key) {
+        // Remove from selected array
+        const index = this.options.selected.indexOf(key);
+        if (index > -1) {
+            this.options.selected.splice(index, 1);
+        }
+        
+        // Remove from UI
+        const basket = document.querySelector(this.options.selectors.selectionBasket);
+        const link = basket.querySelector(`a[key="${key}"]`);
+        if (link) {
+            link.parentElement.remove();
+        }
+        
+        this.updateButtonStates();
+    }
+    
+    updateButtonStates() {
+        // Update all buttons to show correct add/remove state
+        const content = document.querySelector(this.options.selectors.entityBrowserContent);
+        content.querySelectorAll('button.btn-select').forEach(button => {
+            const key = button.getAttribute('key');
+            const isSelected = this.options.selected.includes(key);
+            
+            // Remove existing event listeners by cloning
+            const newButton = button.cloneNode(true);
+            button.parentNode.replaceChild(newButton, button);
+            
+            if (isSelected) {
+                newButton.innerHTML = 'Remove from Selection <i class="fa fa-minus-circle"></i>';
+                newButton.className = 'btn btn-select btn-danger btn-sm';
+                newButton.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    this.deselectEntity(key);
+                });
+            } else {
+                newButton.innerHTML = 'Add to Selection <i class="fa fa-plus-circle"></i>';
+                newButton.className = 'btn btn-select btn-success btn-sm';
+                newButton.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    this.selectEntity(key);
+                });
+            }
+        });
+    }
+    
+    setupAdHocForm() {
+        const modal = document.querySelector('#adhocGroupModal');
+        const saveButton = document.querySelector('[id$="saveAdHocButton"]');
+        
+        // Clear form when modal opens (using Bootstrap 5 event)
+        modal.addEventListener('shown.bs.modal', () => {
+            document.querySelector('#groupName').value = '';
+            document.querySelector('#groupDesc').value = '';
+            saveButton.disabled = true;
+            document.querySelector('#groupName').parentElement.classList.remove('is-invalid');
+        });
+        
+        // Handle save button click (like original Fluid component)
+        saveButton.addEventListener('click', (e) => {
+            e.preventDefault();
+            this.submitAdHocGroup();
+        });
+    }
+    
+    submitAdHocGroup() {
+        const $ = up.jQuery;
+        const parentKey = this.container.querySelector('#currentEntityName')?.getAttribute('key') || 
+                         document.querySelector(this.options.selectors.currentEntityName)?.getAttribute('key');
+        const parentName = this.container.querySelector('#currentEntityName')?.textContent || 
+                          document.querySelector(this.options.selectors.currentEntityName)?.textContent;
+        const groupName = $('#groupName').val();
+        const groupDesc = $('#groupDesc').val();
+        
+        if (!groupName || !parentName) {
+            console.error('Missing required fields');
+            return;
+        }
+        
+        // Get includes and excludes from jsTree selection lists
+        const includes = [];
+        $('[id$="dataIncludesList"] li').each(function() {
+            includes.push($(this).text());
+        });
+        
+        const excludes = [];
+        $('[id$="dataExcludesList"] li').each(function() {
+            excludes.push($(this).text());
+        });
+        
+        // Create test maps like original
+        const createTestMaps = (groupNames, testAttribute) => {
+            return groupNames.map(name => ({
+                testValue: name,
+                attributeName: testAttribute,
+                testerClassName: 'org.apereo.portal.groups.pags.testers.AdHocGroupTester'
+            }));
+        };
+        
+        const tests = createTestMaps(includes, 'group-member')
+            .concat(createTestMaps(excludes, 'not-group-member'));
+        
+        const pagsGroup = {
+            name: groupName,
+            description: groupDesc,
+            testGroups: [{ tests: tests }]
+        };
+        
+        const json = JSON.stringify(pagsGroup);
+        
+        // Use XMLHttpRequest like original
+        const xmlhttp = new XMLHttpRequest();
+        xmlhttp.addEventListener('readystatechange', () => {
+            if (xmlhttp.readyState === 4) {
+                if (xmlhttp.status >= 200 && xmlhttp.status <= 202) {
+                    // Success - refresh entity browser
+                    this.entities.delete(parentKey); // Clear cache
+                    this.browseEntity(parentKey);
+                }
+                this.displayResponseMessage(xmlhttp);
+            }
+        });
+        
+        // Submit to PAGS API endpoint like original
+        xmlhttp.open('POST', `/uPortal/api/v4-3/pags/${parentName}.json`, true);
+        xmlhttp.send(json);
+    }
+    
+    displayResponseMessage(xmlhttp) {
+        const $ = up.jQuery;
+        
+        // Hide all alerts first
+        $('[id$="alertSuccess"], [id$="alertInvalidParent"], [id$="alertGroupExists"], [id$="alertUnauthorized"], [id$="alertUnknown"]').hide();
+        
+        switch (xmlhttp.status) {
+            case 200: // SC_OK
+            case 201: // SC_CREATED  
+            case 202: // SC_ACCEPTED
+                $('[id$="alertSuccess"]').show();
+                // Close modal on success
+                const modal = document.querySelector('#adhocGroupModal');
+                const bsModal = bootstrap.Modal.getInstance(modal);
+                if (bsModal) bsModal.hide();
+                break;
+            case 400: // SC_BAD_REQUEST -> bad parent
+                $('[id$="alertInvalidParent"]').show();
+                break;
+            case 409: // SC_CONFLICT -> group exists
+                $('[id$="alertGroupExists"]').show();
+                break;
+            case 401: // SC_UNAUTHORIZED
+            case 403: // SC_FORBIDDEN
+                $('[id$="alertUnauthorized"]').show();
+                break;
+            default:
+                $('[id$="alertUnknown"]').show();
+                break;
+        }
+    }
+}
+
+// Replace the global function
+window.up = window.up || {};
+window.up.entityselection = function(container, options) {
+    const selector = new ModernEntitySelector(container, options);
+    
+    return selector;
+};
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-favorite.js b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-favorite.js
new file mode 100644
index 00000000000..0f5e357ef70
--- /dev/null
+++ b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-favorite.js
@@ -0,0 +1,146 @@
+/*
+ * Modern replacement for favorite portlet functionality
+ * Replaces up-favorite.js with vanilla JavaScript implementation
+ */
+'use strict';
+
+class ModernFavoriteManager {
+    constructor(context = '/uPortal') {
+        this.context = context;
+    }
+
+    async addToFavorite(portletId) {
+        try {
+            const response = await fetch(
+                `${this.context}/api/layout?action=addFavorite&channelId=${portletId}`,
+                { method: 'POST' }
+            );
+
+            if (!response.ok) {
+                const body = await response.json().catch(() => null);
+                throw new Error(body?.response || `HTTP ${response.status}: ${response.statusText}`);
+            }
+
+            const result = await response.json();
+            if (window.up?.notify) window.up.notify(result.response, 'TopCenter', 'success');
+            return result;
+        } catch (error) {
+            console.error('Error adding to favorites:', error);
+            if (window.up?.notify) window.up.notify(error.message || 'Error adding to favorites', 'TopCenter', 'error');
+            
+            throw error;
+        }
+    }
+
+    async removeFromFavorite(portletId) {
+        try {
+            const response = await fetch(
+                `${this.context}/api/layout?action=removeFavorite&channelId=${portletId}`,
+                { method: 'POST' }
+            );
+
+            if (!response.ok) {
+                const body = await response.json().catch(() => null);
+                throw new Error(body?.response || `HTTP ${response.status}: ${response.statusText}`);
+            }
+
+            const result = await response.json();
+            if (window.up?.notify) window.up.notify(result.response, 'TopCenter', 'success');
+            return result;
+        } catch (error) {
+            console.error('Error removing from favorites:', error);
+            if (window.up?.notify) window.up.notify(error.message || 'Error removing from favorites', 'TopCenter', 'error');
+            
+            throw error;
+        }
+    }
+
+    async moveStuff(tabOrPortlet, item, context = this.context) {
+        const sourceID = item.getAttribute('sourceid');
+        const nextElement = item.nextElementSibling;
+        const prevElement = item.previousElementSibling;
+        
+        const nextId = nextElement?.getAttribute('sourceid') || '';
+        const previousId = prevElement?.getAttribute('sourceid') || '';
+
+        if (tabOrPortlet === 'Tab') {
+            return this.moveFavoriteGroup(sourceID, previousId, nextId, context);
+        } else {
+            return this.insertNode(sourceID, previousId, nextId, context);
+        }
+    }
+
+    async insertNode(sourceId, previousNodeId, nextNodeId, context = this.context) {
+        const url = `${context}/api/layout?action=movePortletAjax&sourceId=${sourceId}&previousNodeId=${previousNodeId}&nextNodeId=${nextNodeId}`;
+        
+        try {
+            const response = await fetch(url, { method: 'POST' });
+
+            if (!response.ok) {
+                const body = await response.json().catch(() => null);
+                throw new Error(body?.response || `HTTP ${response.status}: ${response.statusText}`);
+            }
+
+            return await response.json();
+        } catch (error) {
+            console.error('Error persisting move:', url, error);
+            throw error;
+        }
+    }
+
+    async moveFavoriteGroup(sourceId, previousNodeId, nextNodeId, context = this.context) {
+        const method = nextNodeId === '' ? 'appendAfter' : 'insertBefore';
+        const elementId = nextNodeId === '' ? previousNodeId : nextNodeId;
+        const url = `${context}/api/layout?action=moveTab&sourceID=${sourceId}&method=${method}&elementID=${elementId}`;
+        
+        try {
+            const response = await fetch(url, { method: 'POST' });
+
+            if (!response.ok) {
+                const body = await response.json().catch(() => null);
+                throw new Error(body?.response || `HTTP ${response.status}: ${response.statusText}`);
+            }
+
+            return await response.json();
+        } catch (error) {
+            console.error('Error persisting favorite group reorder:', url, error);
+            throw error;
+        }
+    }
+}
+
+// Global instance and compatibility functions
+window.up = window.up || {};
+window.up.favoriteManager = new ModernFavoriteManager();
+
+// Compatibility functions that match the original API
+window.up.addToFavorite = function(event) {
+    const portletId = event.data?.portletId;
+    const context = event.data?.context || '/uPortal';
+    
+    if (!portletId) {
+        console.error('No portletId provided to addToFavorite');
+        return Promise.reject(new Error('No portletId provided'));
+    }
+    
+    const manager = new ModernFavoriteManager(context);
+    return manager.addToFavorite(portletId);
+};
+
+window.up.removeFromFavorite = function(event) {
+    const portletId = event.data?.portletId;
+    const context = event.data?.context || '/uPortal';
+    
+    if (!portletId) {
+        console.error('No portletId provided to removeFromFavorite');
+        return Promise.reject(new Error('No portletId provided'));
+    }
+    
+    const manager = new ModernFavoriteManager(context);
+    return manager.removeFromFavorite(portletId);
+};
+
+window.up.moveStuff = function(tabOrPortlet, item, context) {
+    const manager = new ModernFavoriteManager(context);
+    return manager.moveStuff(tabOrPortlet, item, context);
+};
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-flyout-nav.js b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-flyout-nav.js
new file mode 100644
index 00000000000..a1ea1cfcf04
--- /dev/null
+++ b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-flyout-nav.js
@@ -0,0 +1,125 @@
+/*
+ * Modern replacement for Fluid FlyoutNav
+ * Handles navigation flyout menus with hover interactions
+ */
+'use strict';
+
+class ModernFlyoutNav {
+    constructor(container, options = {}) {
+        this.container = typeof container === 'string' ? document.querySelector(container) : container;
+        this.options = {
+            orientation: 'horizontal',
+            horzalign: 'left', 
+            vertalign: 'bottom',
+            offset: 0,
+            selectors: {
+                flyoutMenu: '.dropdown-menu',
+                flyoutList: '.portal-subnav-list',
+                dropdownToggle: '.dropdown-toggle'
+            },
+            styles: {
+                onTop: 'on-top'
+            },
+            ...options
+        };
+        
+        this.flyoutMenu = null;
+        this.flyoutList = null;
+        this.isOpen = false;
+        
+        this.init();
+    }
+    
+    init() {
+        this.flyoutMenu = this.container.querySelector(this.options.selectors.flyoutMenu);
+        this.flyoutList = this.container.querySelector(this.options.selectors.flyoutList);
+        const dropdownToggle = this.container.querySelector(this.options.selectors.dropdownToggle);
+        
+        if (!this.flyoutMenu || !this.flyoutList) {
+            return; // No flyout elements found
+        }
+        
+        this.dropdownToggle = dropdownToggle;
+        this.bindEvents();
+    }
+    
+    bindEvents() {
+        this.container.addEventListener('mouseenter', () => {
+            if (this.flyoutList.innerHTML.trim() !== '') {
+                this.openFlyout();
+            }
+        });
+        
+        this.container.addEventListener('mouseleave', () => {
+            this.closeFlyout();
+        });
+
+        if (this.dropdownToggle) {
+            this.dropdownToggle.addEventListener('click', (e) => {
+                e.preventDefault();
+                if (this.isOpen) {
+                    this.closeFlyout();
+                } else if (this.flyoutList.innerHTML.trim() !== '') {
+                    this.openFlyout();
+                }
+            });
+        }
+    }
+    
+    openFlyout() {
+        if (this.isOpen) return;
+        
+        this.calculatePosition();
+        this.flyoutMenu.style.display = 'block';
+        if (this.dropdownToggle) {
+            this.dropdownToggle.setAttribute('aria-expanded', 'true');
+        }
+        this.isOpen = true;
+    }
+    
+    closeFlyout() {
+        if (!this.isOpen) return;
+        
+        this.flyoutMenu.style.display = 'none';
+        if (this.dropdownToggle) {
+            this.dropdownToggle.setAttribute('aria-expanded', 'false');
+        }
+        this.isOpen = false;
+    }
+    
+    calculatePosition() {
+        const containerRect = this.container.getBoundingClientRect();
+        const flyoutRect = this.flyoutMenu.getBoundingClientRect();
+        
+        let top, left;
+        
+        if (this.options.orientation === 'horizontal') {
+            // Horizontal orientation
+            left = this.options.horzalign === 'left' 
+                ? 0 
+                : containerRect.width - flyoutRect.width;
+                
+            top = this.options.vertalign === 'bottom'
+                ? containerRect.height - this.options.offset
+                : -flyoutRect.height;
+        } else {
+            // Vertical orientation  
+            left = this.options.horzalign === 'left'
+                ? -flyoutRect.width
+                : containerRect.width;
+                
+            top = this.options.vertalign === 'bottom'
+                ? 0
+                : -(flyoutRect.height - containerRect.height);
+        }
+        
+        this.flyoutMenu.style.top = `${top}px`;
+        this.flyoutMenu.style.left = `${left}px`;
+    }
+}
+
+// Global initialization function to replace Fluid component
+window.uportal = window.uportal || {};
+window.uportal.flyoutmenu = function(container, options) {
+    return new ModernFlyoutNav(container, options);
+};
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-fragment-permissions-manager.js b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-fragment-permissions-manager.js
new file mode 100644
index 00000000000..4fcb5de28c3
--- /dev/null
+++ b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-fragment-permissions-manager.js
@@ -0,0 +1,316 @@
+/*
+ * Modern replacement for Fluid FragmentPermissionsManager
+ * Handles permission dialogs and lock icon management
+ */
+'use strict';
+
+class ModernFragmentPermissionsManager {
+    constructor(container, options = {}) {
+        this.container = container;
+        this.options = {
+            savePermissionsUrl: 'mvc/layout',
+            selectors: {
+                pageDialog: '.edit-page-permissions-dialog',
+                pageDialogLink: '#editPagePermissionsLink',
+                columnDialog: '.edit-column-permissions-dialog',
+                columnDialogLink: '.portal-column-permissions-link',
+                portletDialog: '.edit-portlet-permissions-dialog',
+                portletDialogLink: '.portlet-permissions-link'
+            },
+            cssClassNames: {
+                movable: 'movable',
+                editable: 'editable',
+                deletable: 'deletable',
+                addChildAllowed: 'canAddChildren'
+            },
+            messages: {
+                columnX: 'Column {0}'
+            },
+            ...options
+        };
+        
+        this.menus = {};
+        this.init();
+    }
+    
+    init() {
+        this.initializeDialogs();
+        this.bindEvents();
+    }
+    
+    initializeDialogs() {
+        // Initialize page permissions dialog
+        const pageDialog = document.querySelector(this.options.selectors.pageDialog);
+        if (pageDialog) {
+            this.menus.pagePermissionsManager = new PermissionsMenu(pageDialog, {
+                savePermissionsUrl: this.options.savePermissionsUrl,
+                elementExtractor: () => document.querySelector('#portalNavigationList li.active'),
+                titleExtractor: () => {
+                    const link = document.querySelector('#portalNavigationList li.active a.portal-navigation-link');
+                    return link ? link.getAttribute('title') : '';
+                }
+            });
+        }
+        
+        // Initialize column permissions dialog
+        const columnDialog = document.querySelector(this.options.selectors.columnDialog);
+        if (columnDialog) {
+            this.menus.columnPermissionsManager = new PermissionsMenu(columnDialog, {
+                savePermissionsUrl: this.options.savePermissionsUrl,
+                elementExtractor: (link) => link.closest('.portal-page-column'),
+                titleExtractor: (element) => {
+                    const columns = document.querySelectorAll('.portal-page-column');
+                    const index = Array.from(columns).indexOf(element) + 1;
+                    return this.options.messages.columnX.replace('{0}', index);
+                }
+            });
+        }
+        
+        // Initialize portlet permissions dialog
+        const portletDialog = document.querySelector(this.options.selectors.portletDialog);
+        if (portletDialog) {
+            this.menus.portletPermissionsManager = new PermissionsMenu(portletDialog, {
+                savePermissionsUrl: this.options.savePermissionsUrl,
+                elementExtractor: (link) => link.closest('.up-portlet-wrapper'),
+                titleExtractor: (element) => {
+                    const titleLink = element.querySelector('.up-portlet-wrapper-inner h2 a:first-child');
+                    return titleLink ? titleLink.textContent : '';
+                },
+                onUpdatePermissions: (element, newPermissions) => {
+                    this.updatePortletLockIcon(element, newPermissions);
+                }
+            });
+        }
+    }
+    
+    bindEvents() {
+        // Page permissions link
+        const pageLink = document.querySelector(this.options.selectors.pageDialogLink);
+        if (pageLink && this.menus.pagePermissionsManager) {
+            pageLink.addEventListener('click', (e) => {
+                e.preventDefault();
+                this.menus.pagePermissionsManager.refresh(pageLink);
+                this.openDialog(this.options.selectors.pageDialog);
+            });
+        }
+        
+        // Column permissions links (delegated event handling)
+        document.addEventListener('click', (e) => {
+            const columnLink = e.target.closest(this.options.selectors.columnDialogLink);
+            if (columnLink && this.menus.columnPermissionsManager) {
+                e.preventDefault();
+                this.menus.columnPermissionsManager.refresh(columnLink);
+                this.openDialog(this.options.selectors.columnDialog);
+            }
+        });
+        
+        // Portlet permissions links (delegated event handling)
+        document.addEventListener('click', (e) => {
+            const portletLink = e.target.closest(this.options.selectors.portletDialogLink);
+            if (portletLink && this.menus.portletPermissionsManager) {
+                e.preventDefault();
+                this.menus.portletPermissionsManager.refresh(portletLink);
+                this.openDialog(this.options.selectors.portletDialog);
+            }
+        });
+    }
+    
+    openDialog(selector) {
+        const dialog = document.querySelector(selector);
+        if (dialog && window.up && window.up.jQuery && window.up.jQuery.fn.dialog) {
+            const $dialog = window.up.jQuery(dialog);
+            
+            // Initialize dialog if not already done
+            if (!$dialog.hasClass('ui-dialog-content')) {
+                $dialog.dialog({
+                    width: 550,
+                    modal: true,
+                    autoOpen: true
+                });
+            } else {
+                $dialog.dialog('open');
+            }
+        }
+    }
+    
+    updatePortletLockIcon(element, newPermissions) {
+        if (newPermissions.movable) {
+            element.classList.remove('locked');
+            // Remove lock icon if it exists
+            const lockIcon = element.querySelector('.locked-icon');
+            if (lockIcon) {
+                lockIcon.remove();
+            }
+        } else {
+            element.classList.add('locked');
+            // Add lock icon if it doesn't exist
+            const controls = element.querySelector('.portlet-controls');
+            if (controls && !controls.querySelector('.locked-icon')) {
+                const lockIcon = document.createElement('div');
+                lockIcon.className = 'locked-icon';
+                lockIcon.title = 'This portlet may not be moved';
+                lockIcon.innerHTML = `
+                    <i class="fa fa-lock" aria-hidden="true"></i>
+                    <span class="sr-only">This portlet may not be moved</span>
+                `;
+                controls.insertBefore(lockIcon, controls.firstChild);
+            }
+        }
+    }
+}
+
+class PermissionsMenu {
+    constructor(container, options = {}) {
+        this.container = container;
+        this.options = {
+            savePermissionsUrl: 'mvc/layout',
+            elementExtractor: null,
+            titleExtractor: null,
+            onUpdatePermissions: null,
+            ...options
+        };
+        
+        this.init();
+    }
+    
+    init() {
+        this.bindFormSubmission();
+    }
+    
+    refresh(link) {
+        const element = this.options.elementExtractor ? this.options.elementExtractor(link) : null;
+        if (!element) return false;
+        
+        this.populateForm(element);
+        this.currentElement = element;
+        return false;
+    }
+    
+    populateForm(element) {
+        const form = this.container.querySelector('form');
+        if (!form) return;
+        
+        // Set the hidden node ID
+        const nodeIdInput = form.querySelector('[name=nodeId]');
+        if (nodeIdInput) {
+            nodeIdInput.value = this.extractNodeId(element);
+        }
+        
+        // Set permission checkboxes based on CSS classes
+        this.setCheckbox(form, 'movable', element.classList.contains('movable'));
+        this.setCheckbox(form, 'deletable', element.classList.contains('deletable'));
+        this.setCheckbox(form, 'editable', element.classList.contains('editable'));
+        this.setCheckbox(form, 'addChildAllowed', element.classList.contains('canAddChildren'));
+        
+        // Set form title
+        const titleElement = this.container.querySelector('h2');
+        if (titleElement && this.options.titleExtractor) {
+            titleElement.textContent = this.options.titleExtractor(element);
+        }
+    }
+    
+    setCheckbox(form, name, checked) {
+        const checkbox = form.querySelector(`[name=${name}]`);
+        if (checkbox) {
+            checkbox.checked = checked;
+        }
+    }
+    
+    bindFormSubmission() {
+        const form = this.container.querySelector('form');
+        if (form) {
+            form.addEventListener('submit', (e) => {
+                e.preventDefault();
+                this.updatePermissions();
+                return false;
+            });
+        }
+    }
+    
+    async updatePermissions() {
+        const form = this.container.querySelector('form');
+        if (!form || !this.currentElement) return;
+        
+        const formData = new FormData(form);
+        const data = {
+            elementID: formData.get('nodeId'),
+            action: 'updatePermissions',
+            deletable: formData.has('deletable'),
+            movable: formData.has('movable'),
+            editable: formData.has('editable'),
+            addChildAllowed: formData.has('addChildAllowed')
+        };
+        
+        try {
+            const response = await fetch(this.options.savePermissionsUrl, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded',
+                },
+                body: new URLSearchParams(data)
+            });
+            
+            if (response.ok) {
+                this.updatePermissionClasses(this.currentElement, data);
+                this.closeDialog();
+                
+                // Fire update event
+                if (this.options.onUpdatePermissions) {
+                    this.options.onUpdatePermissions(this.currentElement, data);
+                }
+            } else {
+                console.error('Failed to update permissions:', response.statusText);
+            }
+        } catch (error) {
+            console.error('Error updating permissions:', error);
+        }
+    }
+    
+    updatePermissionClasses(element, permissions) {
+        this.setClass(element, permissions.deletable, 'deletable');
+        this.setClass(element, permissions.movable, 'movable');
+        this.setClass(element, permissions.editable, 'editable');
+        this.setClass(element, permissions.addChildAllowed, 'canAddChildren');
+    }
+    
+    setClass(element, permission, className) {
+        if (permission === undefined) return;
+        
+        if (permission) {
+            element.classList.add(className);
+        } else {
+            element.classList.remove(className);
+        }
+    }
+    
+    closeDialog() {
+        if (window.up && window.up.jQuery && window.up.jQuery.fn.dialog) {
+            window.up.jQuery(this.container).dialog('close');
+            // Force cleanup of any modal artifacts
+            window.up.jQuery('.ui-widget-overlay, .modal-backdrop').remove();
+            document.body.style.overflow = '';
+        }
+    }
+    
+    extractNodeId(element) {
+        // Use the same logic as up.defaultNodeIdExtractor
+        if (window.up && window.up.defaultNodeIdExtractor) {
+            return window.up.defaultNodeIdExtractor(element);
+        }
+        
+        // Fallback: extract from ID attribute
+        const id = element.id;
+        if (id) {
+            const match = id.match(/^[^_]+_(.+)$/);
+            return match ? match[1] : id;
+        }
+        
+        return '';
+    }
+}
+
+// Global initialization function to replace Fluid component
+window.up = window.up || {};
+window.up.FragmentPermissionsManager = function(container, options) {
+    return new ModernFragmentPermissionsManager(container, options);
+};
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-ga.js b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-ga.js
new file mode 100644
index 00000000000..e37cfa59bfc
--- /dev/null
+++ b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-ga.js
@@ -0,0 +1,291 @@
+/*
+ * Modern replacement for Google Analytics integration
+ * Replaces up-ga.js with vanilla JavaScript implementation
+ */
+'use strict';
+
+class ModernGoogleAnalytics {
+    constructor() {
+        this.propertyConfig = null;
+        this.init();
+    }
+
+    init() {
+        this.propertyConfig = this.findPropertyConfig();
+        
+        if (!this.propertyConfig) {
+            return;
+        }
+
+        this.configureDefaults(this.propertyConfig);
+        this.createTracker(this.propertyConfig);
+        
+        const dimensions = this.getDimensions(this.propertyConfig);
+        
+        // Page Event
+        const pageVariables = this.getPageVariables();
+        
+        // Don't send view in MAX WindowState
+        if (window.up?.analytics?.pageData?.urlState !== 'MAX') {
+            window.up.gtag('event', 'page_view', { ...pageVariables, ...dimensions });
+        }
+
+        // Timing event
+        window.up.gtag('event', 'timing_complete', {
+            event_category: 'tab',
+            name: this.getTabUri(),
+            value: window.up?.analytics?.pageData?.executionTimeNano,
+            ...pageVariables,
+            ...dimensions
+        });
+
+        // Portlet Events
+        this.trackPortletEvents(dimensions);
+        
+        // Add event handlers
+        this.addFlyoutHandlers();
+        this.addExternalLinkHandlers();
+        this.addMobileListTabHandlers();
+    }
+
+    findPropertyConfig() {
+        if (!window.up?.analytics?.model) {
+            return null;
+        }
+
+        const model = window.up.analytics.model;
+        
+        if (Array.isArray(model.hosts)) {
+            const config = model.hosts.find(config => 
+                config.name === window.up.analytics.host
+            );
+            if (config) return config;
+        }
+
+        return model.defaultConfig;
+    }
+
+    configureDefaults(propertyConfig) {
+        const defaults = propertyConfig.config || [];
+        defaults.forEach(setting => {
+            Object.keys(setting).forEach(key => {
+                window.up.gtag('set', key, setting[key]);
+            });
+        });
+    }
+
+    getDimensions(propertyConfig) {
+        const dimensions = {};
+        (propertyConfig.dimensionGroups || []).forEach(setting => {
+            dimensions[`dimension${setting.name}`] = setting.value;
+        });
+        return dimensions;
+    }
+
+    createTracker(propertyConfig) {
+        const createSettings = {};
+        (propertyConfig.config || []).forEach(setting => {
+            if (setting.name !== 'name') {
+                createSettings[setting.name] = setting.value;
+            }
+        });
+        
+        window.up.gtag('config', propertyConfig.propertyId, {
+            send_page_view: false
+        });
+    }
+
+    getTabUri(fragmentName, tabName) {
+        const pageData = window.up?.analytics?.pageData;
+        if (pageData?.tab) {
+            fragmentName = fragmentName || pageData.tab.fragmentName;
+            tabName = tabName || pageData.tab.tabName;
+        }
+
+        let uri = '/';
+        if (fragmentName) {
+            uri += `tab/${fragmentName}`;
+            if (tabName) {
+                uri += `/${tabName}`;
+            }
+        }
+        return uri;
+    }
+
+    getPageVariables(fragmentName, tabName) {
+        const pageData = window.up?.analytics?.pageData;
+        if (pageData?.tab) {
+            fragmentName = fragmentName || pageData.tab.fragmentName;
+            tabName = tabName || pageData.tab.tabName;
+        }
+
+        let title;
+        if (tabName) {
+            title = `Tab: ${tabName}`;
+        } else if (!pageData?.urlState) {
+            title = 'Portal Home';
+        } else {
+            title = 'No Tab';
+        }
+
+        return {
+            page_location: this.getTabUri(fragmentName, tabName),
+            page_title: title
+        };
+    }
+
+    getPortletFname(windowId) {
+        const portletData = window.up?.analytics?.portletData?.[windowId];
+        return portletData?.fname || windowId;
+    }
+
+    getRenderedPortletTitle(windowId) {
+        const wrapper = document.querySelector(`div.up-portlet-windowId-content-wrapper.${windowId}`);
+        if (!wrapper) return this.getPortletFname(windowId);
+
+        const portletWrapper = wrapper.closest('div.up-portlet-wrapper-inner');
+        if (!portletWrapper) return this.getPortletFname(windowId);
+
+        const titleLink = portletWrapper.querySelector('div.up-portlet-titlebar h2 a');
+        return titleLink?.textContent?.trim() || this.getPortletFname(windowId);
+    }
+
+    getPortletUri(fname) {
+        return `/portlet/${fname}`;
+    }
+
+    getPortletVariables(windowId, portletData) {
+        const portletTitle = this.getRenderedPortletTitle(windowId);
+        
+        if (!portletData) {
+            portletData = window.up?.analytics?.portletData?.[windowId];
+        }
+        
+        return {
+            page_title: `Portlet: ${portletTitle}`,
+            page_location: this.getPortletUri(portletData.fname)
+        };
+    }
+
+    getInfoClass(element, excludedClasses) {
+        if (!Array.isArray(excludedClasses)) {
+            excludedClasses = [excludedClasses];
+        }
+
+        const classAttribute = element?.className;
+        if (!classAttribute) return null;
+
+        const classes = classAttribute.split(/\s+/);
+        return classes.find(cls => !excludedClasses.includes(cls));
+    }
+
+    getFlyoutFname(clickedLink) {
+        const wrapper = clickedLink.closest('div.up-portlet-fname-subnav-wrapper');
+        return this.getInfoClass(wrapper, 'up-portlet-fname-subnav-wrapper');
+    }
+
+    getExternalLinkWindowId(clickedLink) {
+        const wrapper = clickedLink.closest('div.up-portlet-windowId-content-wrapper');
+        return this.getInfoClass(wrapper, 'up-portlet-windowId-content-wrapper');
+    }
+
+    handleLinkClickEvent(event, clickedLink, eventOptions) {
+        const newWindow = event.button === 1 || 
+                         event.metaKey || 
+                         event.ctrlKey || 
+                         clickedLink.target;
+
+        const clickFunction = newWindow ? 
+            () => {} : 
+            () => { document.location = clickedLink.href; };
+
+        window.up.gtag('event', 'page_view', {
+            event_callback: clickFunction,
+            ...eventOptions
+        });
+
+        if (!newWindow) {
+            setTimeout(clickFunction, 200);
+            event.preventDefault();
+        }
+    }
+
+    trackPortletEvents(dimensions) {
+        const portletData = window.up?.analytics?.portletData || {};
+        
+        Object.entries(portletData).forEach(([windowId, data]) => {
+            if (data.fname === 'google-analytics-config') {
+                return;
+            }
+
+            const portletVariables = this.getPortletVariables(windowId, data);
+            window.up.gtag('event', 'page_view', portletVariables);
+            window.up.gtag('event', 'timing_complete', {
+                event_category: 'tab',
+                name: this.getTabUri(),
+                value: window.up?.analytics?.pageData?.executionTimeNano,
+                ...portletVariables,
+                ...dimensions
+            });
+        });
+    }
+
+    addFlyoutHandlers() {
+        document.addEventListener('click', (event) => {
+            const link = event.target.closest('ul.fl-tabs li.portal-navigation a.portal-subnav-link');
+            if (!link) return;
+
+            const portletFlyoutTitle = link.querySelector('span.portal-subnav-label')?.textContent || '';
+            const fname = this.getFlyoutFname(link);
+            const pageVariables = this.getPageVariables();
+
+            this.handleLinkClickEvent(event, link, {
+                event_category: 'Flyout Link',
+                event_action: this.getPortletUri(fname),
+                event_label: portletFlyoutTitle,
+                ...pageVariables
+            });
+        });
+    }
+
+    addExternalLinkHandlers() {
+        document.addEventListener('click', (event) => {
+            const link = event.target.closest('a');
+            if (!link) return;
+
+            const linkHost = new URL(link.href, document.baseURI).hostname;
+            if (linkHost && linkHost !== document.domain) {
+                const windowId = this.getExternalLinkWindowId(link);
+                const eventVariables = windowId ? 
+                    this.getPortletVariables(windowId) : 
+                    this.getPageVariables();
+
+                this.handleLinkClickEvent(event, link, {
+                    event_category: 'Outbound Link',
+                    event_action: link.href,
+                    event_label: link.textContent,
+                    ...eventVariables
+                });
+            }
+        });
+    }
+
+    addMobileListTabHandlers() {
+        document.addEventListener('click', (event) => {
+            const tab = event.target.closest('ul.up-portal-nav li.up-tab');
+            if (!tab || tab.classList.contains('up-tab-open')) return;
+
+            const ownerDiv = tab.querySelector('div.up-tab-owner');
+            const fragmentName = this.getInfoClass(ownerDiv, 'up-tab-owner');
+            const tabName = tab.querySelector('span.up-tab-name')?.textContent?.trim();
+            const pageVariables = this.getPageVariables(fragmentName, tabName);
+
+            window.up.gtag('event', 'page_view', pageVariables);
+        });
+    }
+}
+
+// Initialize when DOM is ready
+document.addEventListener('DOMContentLoaded', () => {
+    new ModernGoogleAnalytics();
+});
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-layout-draggable-manager.js b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-layout-draggable-manager.js
new file mode 100644
index 00000000000..56a19baabf2
--- /dev/null
+++ b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-layout-draggable-manager.js
@@ -0,0 +1,297 @@
+/*
+ * Modern replacement for Fluid-based LayoutDraggableManager component
+ * Replaces up-layout-draggable-manager.js with HTML5 drag and drop API
+ */
+'use strict';
+
+class ModernLayoutDraggableManager {
+    constructor(container, options = {}) {
+        this.container = container;
+        this.options = {
+            onDropTarget: null,
+            pseudoDropTargetLabel: 'Drop Here',
+            ...options
+        };
+        this.currentDragData = null;
+        this.init();
+    }
+    
+    init() {
+        this.setupDragAndDrop();
+    }
+    
+    setupDragAndDrop() {
+        // Set up drag and drop when portlet list is rendered
+        const observer = new MutationObserver(() => {
+            this.initializeDraggables();
+        });
+        
+        const portletList = this.container.querySelector('.portlet-list');
+        if (portletList) {
+            observer.observe(portletList, { childList: true, subtree: true });
+            this.initializeDraggables();
+        }
+    }
+    
+    initializeDraggables() {
+        // Handle both gallery portlets and page portlets
+        const galleryPortlets = this.container.querySelectorAll('.portlet-list .portlet');
+        const pagePortlets = document.querySelectorAll('[id*=portlet_].movable');
+        
+        // Initialize gallery portlets (for Add Stuff functionality)
+        galleryPortlets.forEach(item => {
+            if (item.draggable) return; // Already initialized
+            
+            const dragHandle = item.querySelector('.portlet-thumb-gripper');
+            if (!dragHandle) return;
+            
+            // Make item draggable
+            item.draggable = true;
+            item.classList.add('draggable-portlet');
+            
+            // Store portlet data
+            const titleEl = item.querySelector('.portlet-thumb-titlebar');
+            const title = titleEl ? titleEl.textContent : 'Unknown';
+            
+            item.addEventListener('dragstart', (e) => {
+                this.currentDragData = {
+                    id: item.getAttribute('data-portlet-id') || item.id,
+                    title: title,
+                    element: item
+                };
+                
+                // Set drag image
+                const dragImage = item.cloneNode(true);
+                dragImage.style.opacity = '0.8';
+                dragImage.style.transform = 'rotate(5deg)';
+                document.body.appendChild(dragImage);
+                e.dataTransfer.setDragImage(dragImage, 50, 25);
+                
+                // Clean up drag image after drag starts
+                setTimeout(() => {
+                    if (document.body.contains(dragImage)) {
+                        document.body.removeChild(dragImage);
+                    }
+                }, 0);
+                
+                // Enable drop zones
+                this.enableDropZones();
+                
+                e.dataTransfer.effectAllowed = 'copy';
+                e.dataTransfer.setData('text/plain', title);
+            });
+            
+            item.addEventListener('dragend', () => {
+                this.disableDropZones();
+                this.currentDragData = null;
+            });
+        });
+        
+        // Initialize page portlets (for moving existing portlets)
+        pagePortlets.forEach(item => {
+            if (item.draggable) return; // Already initialized
+            
+            const dragHandle = item.querySelector('.grab-handle');
+            if (!dragHandle) return;
+            
+            // Make item draggable
+            item.draggable = true;
+            item.classList.add('draggable-portlet');
+            
+            const titleEl = item.querySelector('.up-portlet-titlebar .up-portlet-title');
+            const title = titleEl ? titleEl.textContent : 'Portlet';
+            
+            item.addEventListener('dragstart', (e) => {
+                this.currentDragData = {
+                    id: window.up.defaultNodeIdExtractor(item),
+                    title: title,
+                    element: item
+                };
+                
+                // Enable drop zones
+                this.enableDropZones();
+                
+                e.dataTransfer.effectAllowed = 'move';
+                e.dataTransfer.setData('text/plain', title);
+            });
+            
+            item.addEventListener('dragend', () => {
+                this.disableDropZones();
+                this.currentDragData = null;
+            });
+        });
+    }
+    
+    enableDropZones() {
+        const columns = document.querySelectorAll('#portalPageBodyColumns .portal-page-column.canAddChildren, #portalPageBodyColumns .portal-page-column.up-fragment-admin');
+        
+        columns.forEach(column => {
+            const inner = column.querySelector('.portal-page-column-inner');
+            if (!inner) return;
+            
+            // Create drop target
+            const dropTarget = this.createDropTarget();
+            this.positionDropTarget(column, dropTarget);
+            
+            // Set up drop events
+            inner.addEventListener('dragover', this.handleDragOver.bind(this));
+            inner.addEventListener('dragenter', this.handleDragEnter.bind(this));
+            inner.addEventListener('dragleave', this.handleDragLeave.bind(this));
+            inner.addEventListener('drop', this.handleDrop.bind(this));
+            
+            inner.classList.add('drop-enabled');
+        });
+    }
+    
+    disableDropZones() {
+        const columns = document.querySelectorAll('#portalPageBodyColumns .portal-page-column-inner.drop-enabled');
+        
+        columns.forEach(inner => {
+            inner.removeEventListener('dragover', this.handleDragOver.bind(this));
+            inner.removeEventListener('dragenter', this.handleDragEnter.bind(this));
+            inner.removeEventListener('dragleave', this.handleDragLeave.bind(this));
+            inner.removeEventListener('drop', this.handleDrop.bind(this));
+            inner.classList.remove('drop-enabled');
+        });
+        
+        // Remove all drop targets
+        document.querySelectorAll('.layout-draggable-drop-target').forEach(target => {
+            target.remove();
+        });
+    }
+    
+    createDropTarget() {
+        const dropTarget = document.createElement('div');
+        dropTarget.className = 'layout-draggable-drop-target';
+        dropTarget.innerHTML = `<span>${this.options.pseudoDropTargetLabel}</span>`;
+        dropTarget.style.cssText = `
+            background: #e6f3ff;
+            border: 2px dashed #0066cc;
+            padding: 20px;
+            margin: 10px 0;
+            text-align: center;
+            color: #0066cc;
+            font-weight: bold;
+            border-radius: 4px;
+            display: none;
+        `;
+        return dropTarget;
+    }
+    
+    positionDropTarget(column, dropTarget) {
+        const portlets = column.querySelectorAll('[id*=portlet_]');
+        const lockedPortlets = column.querySelectorAll('[id*=portlet_].locked:not(.up-fragment-admin)');
+        
+        if (portlets.length > 0) {
+            if (lockedPortlets.length > 0) {
+                // Insert after last locked portlet
+                const lastLocked = lockedPortlets[lockedPortlets.length - 1];
+                lastLocked.parentNode.insertBefore(dropTarget, lastLocked.nextSibling);
+            } else {
+                // Insert before first movable portlet
+                const firstMovable = column.querySelector('[id*=portlet_].movable, [id*=portlet_].up-fragment-admin');
+                if (firstMovable) {
+                    firstMovable.parentNode.insertBefore(dropTarget, firstMovable);
+                } else {
+                    column.appendChild(dropTarget);
+                }
+            }
+        } else {
+            // Empty column - add to end
+            const inner = column.querySelector('.portal-page-column-inner');
+            if (inner) {
+                inner.appendChild(dropTarget);
+            } else {
+                column.appendChild(dropTarget);
+            }
+        }
+    }
+    
+    handleDragOver(e) {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'copy';
+    }
+    
+    handleDragEnter(e) {
+        e.preventDefault();
+        const column = e.currentTarget.closest('.portal-page-column');
+        const dropTarget = column.querySelector('.layout-draggable-drop-target');
+        if (dropTarget) {
+            dropTarget.style.display = 'block';
+        }
+    }
+    
+    handleDragLeave(e) {
+        // Only hide if we're actually leaving the column
+        const column = e.currentTarget.closest('.portal-page-column');
+        const rect = column.getBoundingClientRect();
+        
+        if (e.clientX < rect.left || e.clientX > rect.right || 
+            e.clientY < rect.top || e.clientY > rect.bottom) {
+            const dropTarget = column.querySelector('.layout-draggable-drop-target');
+            if (dropTarget) {
+                dropTarget.style.display = 'none';
+            }
+        }
+    }
+    
+    handleDrop(e) {
+        e.preventDefault();
+        
+        if (!this.currentDragData) return;
+        
+        const column = e.currentTarget.closest('.portal-page-column');
+        const dropTarget = column.querySelector('.layout-draggable-drop-target');
+        
+        if (dropTarget) {
+            dropTarget.classList.add('layout-draggable-target-dropped');
+            
+            // Determine target ID and method
+            let targetID, method;
+            
+            const portlets = column.querySelectorAll('[id*=portlet_]');
+            if (portlets.length > 0) {
+                const movablePortlets = column.querySelectorAll('[id*=portlet_].movable, [id*=portlet_].up-fragment-admin');
+                if (movablePortlets.length > 0) {
+                    // Check siblings around drop target
+                    const prevSibling = dropTarget.previousElementSibling;
+                    const nextSibling = dropTarget.nextElementSibling;
+                    
+                    if (prevSibling && prevSibling.id && prevSibling.id.includes('portlet_')) {
+                        targetID = window.up.defaultNodeIdExtractor(prevSibling);
+                        method = 'appendAfter';
+                    } else if (nextSibling && nextSibling.id && nextSibling.id.includes('portlet_')) {
+                        targetID = window.up.defaultNodeIdExtractor(nextSibling);
+                        method = 'insertBefore';
+                    } else {
+                        targetID = window.up.defaultNodeIdExtractor(column);
+                        method = 'appendAfter';
+                    }
+                } else {
+                    // All portlets are locked
+                    targetID = window.up.defaultNodeIdExtractor(column);
+                    method = 'appendAfter';
+                }
+            } else {
+                // Empty column
+                targetID = window.up.defaultNodeIdExtractor(column);
+                method = 'appendAfter';
+            }
+            
+            // Fire drop event
+            if (this.options.onDropTarget) {
+                this.options.onDropTarget(method, targetID, this.currentDragData);
+            }
+        }
+    }
+}
+
+// Global initialization function to replace Fluid component
+window.up = window.up || {};
+window.up.LayoutDraggableManager = function(container, options) {
+    const element = typeof container === 'string' ? document.querySelector(container) : container;
+    return new ModernLayoutDraggableManager(element, options);
+};
+
+// Export class globally for modern components
+window.ModernLayoutDraggableManager = ModernLayoutDraggableManager;
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-layout-preferences-persistence.js b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-layout-preferences-persistence.js
new file mode 100644
index 00000000000..4ea9cc9757e
--- /dev/null
+++ b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-layout-preferences-persistence.js
@@ -0,0 +1,140 @@
+/*
+ * Modern replacement for Fluid LayoutPreferencesPersistence
+ * Handles layout state persistence via AJAX
+ */
+'use strict';
+
+class ModernLayoutPreferencesPersistence {
+    constructor(container, options = {}) {
+        this.container = container;
+        this.options = {
+            saveLayoutUrl: '/uPortal/api/layout',
+            messages: {
+                error: 'Error persisting layout change'
+            },
+            ...options
+        };
+        
+        this.events = {
+            onSuccess: [],
+            onError: []
+        };
+    }
+    
+    /**
+     * Update layout preferences via AJAX
+     * @param {Object} data - Layout data to persist
+     * @param {Function} success - Success callback
+     */
+    async update(data, success) {
+        try {
+            // Handle array parameters properly for server
+            const formData = new URLSearchParams();
+            Object.keys(data).forEach(key => {
+                if (Array.isArray(data[key])) {
+                    // Convert arrays to multiple parameters with [] suffix
+                    data[key].forEach(value => {
+                        formData.append(key + '[]', value);
+                    });
+                } else {
+                    formData.append(key, data[key]);
+                }
+            });
+            
+            const response = await fetch(this.options.saveLayoutUrl, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded',
+                },
+                body: formData
+            });
+            
+            if (response.ok) {
+                let result = null;
+                
+                // Try to parse JSON, but don't fail if it's not JSON
+                try {
+                    const text = await response.text();
+                    if (text.trim()) {
+                        result = JSON.parse(text);
+                    } else {
+                        result = { success: true };
+                    }
+                } catch (jsonError) {
+                    // Server returned non-JSON response, which is OK for some operations
+                    result = { success: true };
+                }
+                
+                // Fire success events
+                this.fireEvent('onSuccess', result);
+                
+                // Call success callback if provided
+                if (success) {
+                    success(result);
+                }
+                
+                return result;
+            } else {
+                const errorText = await response.text();
+                console.error('Server error response:', errorText);
+                throw new Error(`HTTP ${response.status}: ${response.statusText}\n${errorText}`);
+            }
+        } catch (error) {
+            console.error('Layout persistence error:', error);
+            
+            // Fire error events
+            this.fireEvent('onError', this, null, error.message, error);
+            
+            // Show error message
+            this.showErrorMessage();
+            
+            throw error;
+        }
+    }
+    
+    /**
+     * Fire event to registered listeners
+     * @param {string} eventName - Name of event to fire
+     * @param {...any} args - Arguments to pass to listeners
+     */
+    fireEvent(eventName, ...args) {
+        if (this.events[eventName]) {
+            this.events[eventName].forEach(listener => {
+                if (typeof listener === 'function') {
+                    listener(...args);
+                }
+            });
+        }
+    }
+    
+    /**
+     * Add event listener
+     * @param {string} eventName - Name of event
+     * @param {Function} listener - Listener function
+     */
+    addEventListener(eventName, listener) {
+        if (!this.events[eventName]) {
+            this.events[eventName] = [];
+        }
+        this.events[eventName].push(listener);
+    }
+    
+    /**
+     * Show error message to user
+     */
+    showErrorMessage() {
+        const errorElement = this.container.querySelector('.layout-persistence-error-message');
+        if (errorElement) {
+            errorElement.textContent = this.options.messages.error;
+            errorElement.style.display = 'block';
+            
+            // Hide after 5 seconds
+            setTimeout(() => {
+                errorElement.style.display = 'none';
+            }, 5000);
+        }
+    }
+}
+
+// Make class available globally for modern-layout-preferences.js to use
+window.ModernLayoutPreferencesPersistence = ModernLayoutPreferencesPersistence;
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-layout-preferences.js b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-layout-preferences.js
new file mode 100644
index 00000000000..60352ba1a39
--- /dev/null
+++ b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-layout-preferences.js
@@ -0,0 +1,487 @@
+/*
+ * Modern replacement for Fluid-based LayoutPreferences component
+ * Replaces up-layout-preferences.js with vanilla JavaScript implementation
+ */
+'use strict';
+
+class LayoutPreferences {
+    constructor(container, options = {}) {
+        this.container = typeof container === 'string' ? document.querySelector(container) : container;
+        this.options = {
+            tabContext: 'header',
+            numberOfPortlets: 0,
+            portalContext: '/uPortal',
+            layoutPersistenceUrl: '/uPortal/api/layout',
+            channelRegistryUrl: '/uPortal/api/portletList',
+            mediaPath: null,
+            currentSkin: null,
+            gallerySelector: '.up-gallery',
+            columnWidthClassPattern: /col-md-/,
+            messages: {
+                persistenceError: 'Error persisting layout change',
+                confirmRemoveTab: 'Are you sure you want to remove this tab?',
+                confirmRemovePortlet: 'Are you sure you want to remove this portlet?',
+                movePortletError: 'Error moving portlet. Reload page?',
+                addTabLabel: 'Add Tab'
+            },
+            ...options
+        };
+        
+        this.components = {};
+        this.init();
+    }
+
+    init() {
+        // Initialize persistence and URL provider
+        this.persistence = new LayoutPreferencesPersistence(this.container, {
+            saveLayoutUrl: this.options.layoutPersistenceUrl,
+            messages: { error: this.options.messages.persistenceError }
+        });
+
+        this.urlProvider = new UrlProvider(this.container, {
+            portalContext: this.options.portalContext
+        });
+
+        // Initialize components
+        this.initializeGallery();
+        this.initializeTabManager();
+        this.initializePortletReorderer();
+        this.initializePortletDeletion();
+    }
+
+    initializeGallery() {
+        if (this.options.gallerySelector && document.querySelector(this.options.gallerySelector)) {
+            this.components.gallery = new PortalGallery(this.options.gallerySelector, {
+                isOpen: false
+            });
+            // Store global reference for PortletBrowser access
+            window.up.gallery = this.components.gallery;
+        }
+    }
+
+    initializeTabManager() {
+        const tabNavigation = document.querySelector('#portalNavigation');
+        if (tabNavigation) {
+            this.components.tabManager = new TabManager('#portalNavigation', {
+                onTabEdit: (newValue) => {
+                    this.persistence.update({
+                        action: 'renameTab',
+                        tabId: this.getActiveTabId(),
+                        tabName: newValue
+                    }, () => {
+                        // Success callback - stay on current page, no navigation needed
+                    }, (error) => {
+                        // Error callback - handle failure
+                        console.error('Tab rename failed:', error);
+                    });
+                },
+                onTabRemove: (tabContainer) => {
+                    if (!confirm(this.options.messages.confirmRemoveTab)) {
+                        return false;
+                    }
+                    
+                    const id = window.up.defaultNodeIdExtractor(tabContainer);
+                    this.persistence.update({
+                        action: 'removeElement',
+                        elementID: id
+                    }, () => {
+                        window.location = this.urlProvider.getPortalHomeUrl();
+                    });
+                },
+                onTabAdd: (tabLabel, columns, tabGroup) => {
+                    this.persistence.update({
+                        action: 'addTab',
+                        tabName: tabLabel,
+                        widths: columns,
+                        tabGroup: tabGroup
+                    }, (data) => {
+                        const tabUrl = this.urlProvider.getTabUrl(data.tabId);
+                        window.location = tabUrl;
+                    });
+                },
+                onTabMove: (sourceId, method, elementId, tabPosition) => {
+                    this.persistence.update({
+                        action: 'moveTab',
+                        sourceID: sourceId,
+                        method: method,
+                        elementID: elementId,
+                        tabPosition: tabPosition
+                    });
+                },
+                tabContext: this.options.tabContext,
+                numberOfPortlets: this.options.numberOfPortlets,
+                addTabLabel: this.options.messages.addTabLabel
+            });
+        }
+    }
+
+    initializePortletReorderer() {
+        // Check if chrome toolbars exist on the layout
+        if (document.querySelectorAll('[id*=toolbar_]').length > 0) {
+            this.components.portletReorderer = new PortletReorderer('#portalPageBodyColumns', {
+                selectors: {
+                    columns: '.portal-page-column-inner',
+                    modules: '.up-portlet-wrapper',
+                    lockedModules: '.locked:not(.up-fragment-admin)',
+                    dropWarning: '#portalDropWarning',
+                    grabHandle: '[id*=toolbar_] .grab-handle'
+                },
+                onAfterMove: (movedNode) => {
+                    let method = 'insertBefore';
+                    let target = null;
+                    
+                    const nextPortlets = movedNode.parentNode.querySelectorAll('[id^=portlet_]');
+                    const movedIndex = Array.from(nextPortlets).indexOf(movedNode);
+                    
+                    if (movedIndex < nextPortlets.length - 1) {
+                        target = nextPortlets[movedIndex + 1];
+                    } else if (movedIndex > 0) {
+                        target = nextPortlets[movedIndex - 1];
+                        method = 'appendAfter';
+                    } else {
+                        target = movedNode.parentNode;
+                    }
+
+                    const options = {
+                        action: 'movePortlet',
+                        method: method,
+                        elementID: window.up.defaultNodeIdExtractor(target),
+                        sourceID: window.up.defaultNodeIdExtractor(movedNode)
+                    };
+                    
+                    // Handle the persistence result properly with async callbacks
+                    const persistence = new ModernLayoutPreferencesPersistence(document.body, {
+                        saveLayoutUrl: '/uPortal/api/layout'
+                    });
+                    
+                    persistence.update(options, (data) => {
+                        // Success - operation completed successfully
+                    }).catch(error => {
+                        // Error - show error dialog and offer reload
+                        console.error('Move failed:', error);
+                        if (confirm(this.options.messages.movePortletError)) {
+                            location.reload();
+                        }
+                    });
+
+                    // Revert the Move Portlet menu item and hide the grab handle
+                    const moveOptionsItem = movedNode.querySelector('.up-portlet-control.move');
+                    if (moveOptionsItem) {
+                        moveOptionsItem.textContent = moveOptionsItem.getAttribute('data-move-text');
+                    }
+                    const grabHandle = movedNode.querySelector('.up-portlet-titlebar .grab-handle');
+                    if (grabHandle) {
+                        grabHandle.classList.add('hidden');
+                    }
+                }
+            });
+            
+            // Store drag manager reference for external access
+            this.dragManager = this.components.portletReorderer;
+        }
+    }
+
+    initializePortletDeletion() {
+        // Portlet deletion
+        document.addEventListener('click', (e) => {
+            if (e.target.matches('a[id*=removePortlet_]')) {
+                e.preventDefault();
+                
+                const id = window.up.defaultNodeIdExtractor(e.target);
+                if (!confirm(this.options.messages.confirmRemovePortlet)) {
+                    return false;
+                }
+                
+                const portletEl = document.querySelector(`#portlet_${id}`);
+                const subnavEl = document.querySelector(`#portalSubnavLink_${id}`);
+                
+                if (portletEl) portletEl.remove();
+                if (subnavEl) subnavEl.remove();
+                
+                this.persistence.update({
+                    action: 'removeElement',
+                    elementID: id
+                });
+                
+                return false;
+            }
+        });
+    }
+
+    getActiveTabId() {
+        const activeTab = document.querySelector('#portalNavigationList li.active');
+        return activeTab ? window.up.defaultNodeIdExtractor(activeTab) : null;
+    }
+
+    showMessage(message, type, callback) {
+        const messageDiv = document.querySelector('#portalPageBodyMessage');
+        if (message && type && messageDiv) {
+            const delay = type === 'error' ? 5000 : 2000;
+            messageDiv.innerHTML = `<p>${message}</p>`;
+            messageDiv.className = type;
+            messageDiv.style.display = 'block';
+            
+            setTimeout(() => {
+                messageDiv.style.opacity = '0';
+                setTimeout(() => {
+                    messageDiv.style.display = 'none';
+                    messageDiv.style.opacity = '1';
+                    if (callback) callback();
+                }, 400);
+            }, delay);
+        } else if (callback) {
+            callback();
+        }
+    }
+}
+
+class FocusedLayoutPreferences {
+    constructor(container, options = {}) {
+        this.container = typeof container === 'string' ? document.querySelector(container) : container;
+        this.options = {
+            portalContext: '/uPortal',
+            layoutPersistenceUrl: '/uPortal/api/layout',
+            messages: {
+                persistenceError: 'Error persisting layout change'
+            },
+            ...options
+        };
+        
+        this.init();
+    }
+
+    init() {
+        this.persistence = new LayoutPreferencesPersistence(this.container, {
+            saveLayoutUrl: this.options.layoutPersistenceUrl,
+            messages: { error: this.options.messages.persistenceError }
+        });
+
+        this.urlProvider = new UrlProvider(this.container, {
+            portalContext: this.options.portalContext
+        });
+
+        this.initializeFocusedContentDialog();
+    }
+
+    initializeFocusedContentDialog() {
+        const dialogLink = document.querySelector('#focusedContentDialogLink');
+        if (dialogLink) {
+            dialogLink.addEventListener('click', (event) => {
+                event.preventDefault();
+                
+                // Initialize the dialog (assuming jQuery UI is still available for dialogs)
+                const dialog = document.querySelector('.focused-content-dialog');
+                if (dialog && window.jQuery) {
+                    window.jQuery(dialog).dialog({ width: 500, modal: true });
+                    
+                    // Wire the form to persist portlet addition
+                    const form = dialog.querySelector('form');
+                    if (form) {
+                        form.addEventListener('submit', (e) => {
+                            e.preventDefault();
+                            
+                            const portletId = form.portletId.value;
+                            const tabId = form.querySelector('[name=targetTab]:checked')?.value;
+                            
+                            this.persistence.update({
+                                action: 'addPortlet',
+                                channelID: portletId,
+                                position: 'insertBefore',
+                                elementID: tabId
+                            }, () => {
+                                window.location = this.urlProvider.getTabUrl(tabId);
+                            });
+                            
+                            return false;
+                        });
+                    }
+                }
+                
+                // Re-wire the link to open the initialized dialog
+                dialogLink.removeEventListener('click', arguments.callee);
+                dialogLink.addEventListener('click', () => {
+                    if (window.jQuery) {
+                        window.jQuery('.focused-content-dialog').dialog('open');
+                    }
+                });
+            });
+        }
+    }
+}
+
+// Placeholder classes for dependencies that need to be modernized separately
+class LayoutPreferencesPersistence {
+    constructor(container, options = {}) {
+        try {
+            const modern = new ModernLayoutPreferencesPersistence(container, options);
+            Object.setPrototypeOf(this, Object.getPrototypeOf(modern));
+            Object.assign(this, modern);
+        } catch (error) {
+            console.error('Error during LayoutPreferencesPersistence initialization:', error);
+            throw error;
+        }
+    }
+}
+
+class UrlProvider {
+    constructor(container, options = {}) {
+        const modern = new ModernUrlProvider(container, options);
+        return modern;
+    }
+}
+
+class TabManager {
+    constructor(selector, options = {}) {
+        // Use ModernTabManager instead of old Fluid implementation
+        const modern = new ModernTabManager(selector, options);
+        return modern;
+    }
+}
+
+class PortletReorderer {
+    constructor(selector, options = {}) {
+        this.container = typeof selector === 'string' ? document.querySelector(selector) : selector;
+        this.options = {
+            onAfterMove: null,
+            pseudoDropTargetLabel: 'Drop Here',
+            ...options,
+            selectors: {
+                columns: '.portal-page-column-inner',
+                modules: '.up-portlet-wrapper',
+                grabHandle: '[id*=toolbar_] .grab-handle',
+                portlet: '[id*=portlet_]',
+                pseudoDropTarget: '.layout-draggable-drop-target',
+                ...options.selectors
+            }
+        };
+        this.dropTargetMarkup = `<div class="layout-draggable-drop-target"><span>${this.options.pseudoDropTargetLabel}</span></div>`;
+        this.draggedEl = null;
+        this.mouseMoveHandler = null;
+        this.setup();
+    }
+
+    setup() {
+        const $ = window.up.jQuery;
+        if (!$) return;
+
+        $(this.options.selectors.modules + '.movable').each(function() {
+            if ($(this).data('ui-draggable')) $(this).draggable('destroy');
+        });
+        $(this.options.selectors.columns).each(function() {
+            if ($(this).data('ui-droppable')) $(this).droppable('destroy');
+        });
+
+        // Droppable needed so revert:invalid works - drop target handles actual placement
+        $(this.options.selectors.columns).droppable({
+            accept: this.options.selectors.modules + '.movable',
+            tolerance: 'pointer',
+            drop: (event, ui) => {
+                const dropTarget = $(this.options.selectors.pseudoDropTarget);
+                const droppedEl = ui.draggable[0];
+                if (dropTarget.length > 0) {
+                    this.dropped = true;
+                    const $el = $(droppedEl).detach();
+                    $el.css({ position: '', top: '', left: '', width: '', zIndex: '' });
+                    dropTarget.replaceWith($el);
+                    if (this.options.onAfterMove) this.options.onAfterMove(droppedEl);
+                }
+            }
+        });
+
+        $(this.options.selectors.modules + '.movable').on('mousedown', function(e) {
+            const r = this.getBoundingClientRect();
+            $(this).draggable('option', 'cursorAt', {
+                left: Math.round(e.clientX - r.left),
+                top: Math.round(e.clientY - r.top)
+            });
+        });
+        $(this.options.selectors.modules + '.movable').draggable({
+            handle: this.options.selectors.grabHandle,
+            cursor: 'move',
+            opacity: 0.8,
+            helper: 'clone',
+            zIndex: 9999,
+            revert: false,
+            start: (event, ui) => {
+                this.dropped = false;
+                this.draggedEl = event.currentTarget;
+                this.dropColumn = $(this.draggedEl).closest(this.options.selectors.columns)[0];
+                ui.helper.css({ zIndex: 9999, width: $(this.draggedEl).outerWidth() });
+                $(this.dropTargetMarkup).insertBefore(this.draggedEl);
+                const $next = $(this.draggedEl).nextAll(this.options.selectors.portlet).first();
+                this.dropInsertBefore = $next.length ? $next[0] : null;
+                this.mouseMoveHandler = (e) => this.onMouseMove(e);
+                document.addEventListener('mousemove', this.mouseMoveHandler);
+            },
+            stop: (event, ui) => {
+                document.removeEventListener('mousemove', this.mouseMoveHandler);
+                this.mouseMoveHandler = null;
+                // If not dropped on a valid target, snap back via the initial drop target
+                if (!this.dropped) {
+                    const initialTarget = $(this.options.selectors.pseudoDropTarget).first();
+                    if (initialTarget.length > 0) {
+                        const $el = $(this.draggedEl).detach();
+                        $el.css({ position: '', top: '', left: '', width: '', zIndex: '' });
+                        initialTarget.replaceWith($el);
+                    }
+                }
+                this.draggedEl = null;
+                $(this.options.selectors.pseudoDropTarget).remove();
+                setTimeout(() => this.setup(), 0);
+            }
+        });
+    }
+
+    onMouseMove(e) {
+        const $ = window.up.jQuery;
+
+        // Find which column the mouse is over
+        let targetColumn = null;
+        $(this.options.selectors.columns).each(function() {
+            const rect = this.getBoundingClientRect();
+            if (e.clientX >= rect.left && e.clientX <= rect.right &&
+                e.clientY >= rect.top  && e.clientY <= rect.bottom) {
+                targetColumn = $(this);
+            }
+        });
+        if (!targetColumn) return;
+
+        // Find insertion point: before the first portlet whose midpoint is below the mouse
+        const portlets = targetColumn.find(this.options.selectors.portlet).not(this.draggedEl);
+        let insertBefore = null;
+        portlets.each(function() {
+            const rect = this.getBoundingClientRect();
+            if (e.clientY < rect.top + rect.height / 2) {
+                insertBefore = this;
+                return false;
+            }
+        });
+
+        // Only move drop target if insertion point has changed
+        if (this.dropInsertBefore === insertBefore && this.dropColumn === targetColumn[0]) return;
+        this.dropInsertBefore = insertBefore;
+        this.dropColumn = targetColumn[0];
+
+        window.up.jQuery(this.options.selectors.pseudoDropTarget).remove();
+        const dropTarget = window.up.jQuery(this.dropTargetMarkup);
+        if (insertBefore) {
+            dropTarget.insertBefore(insertBefore);
+        } else {
+            targetColumn.append(dropTarget);
+        }
+    }
+
+    refresh() { this.setup(); }
+}
+
+// Global initialization function to replace Fluid component
+window.up = window.up || {};
+window.up.LayoutPreferences = function(container, options) {
+    const instance = new LayoutPreferences(container, options);
+    return instance;
+};
+
+window.up.FocusedLayoutPreferences = function(container, options) {
+    const instance = new FocusedLayoutPreferences(container, options);
+    return instance;
+};
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-parameter-editor.js b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-parameter-editor.js
new file mode 100644
index 00000000000..cb442f3cc3b
--- /dev/null
+++ b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-parameter-editor.js
@@ -0,0 +1,303 @@
+/*
+ * Modern replacement for Fluid ParameterEditor
+ * Handles parameter configuration interface
+ */
+'use strict';
+
+class ModernParameterEditor {
+    constructor(container, options = {}) {
+        this.container = typeof container === 'string' ? document.querySelector(container) : container;
+        this.options = {
+            parameterNamePrefix: '',
+            parameterBindName: '',
+            auxiliaryBindName: '',
+            useAuxiliaryCheckbox: false,
+            dialog: null,
+            multivalued: false,
+            displayClasses: {
+                deleteItemLink: 'delete-parameter-link',
+                deleteItemLinkExtraClass: '',
+                deleteValueLink: 'delete-parameter-value-link',
+                deleteValueLinkExtraClass: '',
+                addItemLink: 'add-parameter-link',
+                addItemLinkExtraClass: '',
+                addValueLink: 'add-parameter-value-link',
+                addValueLinkExtraClass: '',
+                inputElementExtraClass: ''
+            },
+            messages: {
+                remove: 'Remove',
+                removeParameter: 'Delete Preference',
+                addValue: 'Add value'
+            },
+            selectors: {
+                preferencesTable: 'tbody'
+            },
+            ...options
+        };
+        
+        this.dialogInitialized = false;
+        this.init();
+    }
+    
+    init() {
+        this.bindExistingElements();
+        this.bindAddParameterAction();
+    }
+    
+    bindExistingElements() {
+        // Bind existing delete parameter links
+        this.container.querySelectorAll(`.${this.options.displayClasses.deleteItemLink}`).forEach(link => {
+            link.addEventListener('click', (e) => {
+                e.preventDefault();
+                this.removeParameter(link);
+            });
+        });
+        
+        // Bind existing delete value links
+        this.container.querySelectorAll(`.${this.options.displayClasses.deleteValueLink}`).forEach(link => {
+            link.addEventListener('click', (e) => {
+                e.preventDefault();
+                this.removeValue(link);
+            });
+        });
+        
+        // Bind existing add value links
+        this.container.querySelectorAll(`.${this.options.displayClasses.addValueLink}`).forEach(link => {
+            link.addEventListener('click', (e) => {
+                e.preventDefault();
+                this.addValue(link);
+            });
+        });
+    }
+    
+    bindAddParameterAction() {
+        // Ensure add button exists
+        this.ensureAddButton();
+        
+        // Bind add parameter link
+        const addLinks = this.container.querySelectorAll(`.${this.options.displayClasses.addItemLink}`);
+        addLinks.forEach(link => {
+            link.addEventListener('click', (e) => {
+                e.preventDefault();
+                this.showAddParameterDialog();
+            });
+        });
+    }
+    
+    ensureAddButton() {
+        // Check if add button already exists
+        const existingAddLink = this.container.querySelector(`.${this.options.displayClasses.addItemLink}`);
+        if (!existingAddLink && this.options.dialog) {
+            // Create add button
+            const addButtonContainer = document.createElement('p');
+            const addButton = document.createElement('a');
+            addButton.href = 'javascript:void(0)';
+            addButton.className = `${this.options.displayClasses.addItemLink} btn btn-primary`;
+            addButton.innerHTML = 'Add Preference&nbsp;&nbsp;<i class="fa fa-plus-circle"></i>';
+            
+            addButtonContainer.appendChild(addButton);
+            this.container.appendChild(addButtonContainer);
+        }
+    }
+    
+    getParameterPath(name) {
+        return `${this.options.parameterBindName}['${this.options.parameterNamePrefix}${name}'].value`;
+    }
+    
+    getAuxiliaryPath(name) {
+        return `${this.options.auxiliaryBindName}['${this.options.parameterNamePrefix}${name}'].value`;
+    }
+    
+    addParameter(form) {
+        const nameInput = form.querySelector('input[name=name]');
+        if (!nameInput) return false;
+        
+        const name = nameInput.value;
+        if (!name.trim()) return false;
+        
+        const parameterPath = this.getAuxiliaryPath(name);
+        
+        // Create new row
+        const tr = document.createElement('tr');
+        
+        // Add parameter name cell
+        const nameCell = document.createElement('td');
+        nameCell.textContent = name;
+        tr.appendChild(nameCell);
+        
+        // Add parameter value cell
+        const valueCell = document.createElement('td');
+        tr.appendChild(valueCell);
+        
+        if (this.options.multivalued) {
+            // Create add value link for multivalued parameters
+            const addValueLink = document.createElement('a');
+            addValueLink.href = '#';
+            addValueLink.setAttribute('paramName', name);
+            addValueLink.className = `${this.options.displayClasses.addValueLink} ${this.options.displayClasses.addValueLinkExtraClass} btn btn-sm btn-info`;
+            addValueLink.innerHTML = `${this.options.messages.addValue}&nbsp;&nbsp;<i class="fa fa-plus-circle"></i>`;
+            
+            addValueLink.addEventListener('click', (e) => {
+                e.preventDefault();
+                this.addValue(addValueLink);
+            });
+            
+            valueCell.appendChild(addValueLink);
+            
+            // Add initial value
+            this.addValue(addValueLink);
+        } else {
+            // Single value input
+            const input = document.createElement('input');
+            input.type = 'text';
+            input.name = parameterPath;
+            input.className = this.options.displayClasses.inputElementExtraClass;
+            valueCell.appendChild(input);
+        }
+        
+        // Add auxiliary checkbox if needed
+        if (this.options.useAuxiliaryCheckbox) {
+            const checkboxCell = document.createElement('td');
+            const checkbox = document.createElement('input');
+            checkbox.type = 'checkbox';
+            checkbox.name = this.getAuxiliaryPath(name);
+            checkbox.value = 'true';
+            checkboxCell.appendChild(checkbox);
+            tr.appendChild(checkboxCell);
+        }
+        
+        // Add remove parameter cell
+        const removeCell = document.createElement('td');
+        const removeLink = document.createElement('a');
+        removeLink.href = '#';
+        removeLink.className = `${this.options.displayClasses.deleteItemLink} ${this.options.displayClasses.deleteItemLinkExtraClass} btn btn-warning`;
+        removeLink.innerHTML = `${this.options.messages.removeParameter}&nbsp;&nbsp;<i class="fa fa-trash-o"></i>`;
+        
+        removeLink.addEventListener('click', (e) => {
+            e.preventDefault();
+            this.removeParameter(removeLink);
+        });
+        
+        removeCell.appendChild(removeLink);
+        tr.appendChild(removeCell);
+        
+        // Add row to table
+        const tbody = this.container.querySelector(this.options.selectors.preferencesTable);
+        if (tbody) {
+            tbody.appendChild(tr);
+        }
+        
+        // Close dialog
+        if (this.options.dialog && up.jQuery) {
+            up.jQuery(this.options.dialog).dialog('close');
+        }
+        
+        return false;
+    }
+    
+    removeParameter(link) {
+        const row = link.closest('tr');
+        if (row) {
+            row.remove();
+        }
+    }
+    
+    addValue(link) {
+        const paramName = link.getAttribute('paramName');
+        if (!paramName) return;
+        
+        const parameterPath = this.getParameterPath(paramName);
+        
+        // Create value container
+        const valueDiv = document.createElement('div');
+        
+        // Create input
+        const input = document.createElement('input');
+        input.type = 'text';
+        input.name = parameterPath;
+        input.className = this.options.displayClasses.inputElementExtraClass;
+        valueDiv.appendChild(input);
+        
+        // Add spacing
+        valueDiv.appendChild(document.createTextNode('  '));
+        
+        // Create remove link
+        const removeLink = document.createElement('a');
+        removeLink.href = '#';
+        removeLink.className = `${this.options.displayClasses.deleteValueLink} ${this.options.displayClasses.deleteValueLinkExtraClass}`;
+        removeLink.innerHTML = `${this.options.messages.remove}&nbsp;&nbsp;<i class="fa fa-minus-circle"></i>`;
+        
+        removeLink.addEventListener('click', (e) => {
+            e.preventDefault();
+            this.removeValue(removeLink);
+        });
+        
+        valueDiv.appendChild(removeLink);
+        
+        // Insert before the add link
+        link.parentNode.insertBefore(valueDiv, link);
+    }
+    
+    removeValue(link) {
+        const valueDiv = link.parentNode;
+        if (valueDiv) {
+            valueDiv.remove();
+        }
+    }
+    
+    showAddParameterDialog() {
+        const dialog = this.options.dialog;
+        if (!dialog) return;
+        
+        if (this.dialogInitialized) {
+            // Reset form and open dialog
+            const form = dialog.querySelector('form');
+            if (form) {
+                form.reset();
+            }
+            if (up.jQuery) {
+                up.jQuery(dialog).dialog('open');
+            }
+        } else {
+            // Initialize dialog
+            const form = dialog.querySelector('form');
+            if (form) {
+                form.addEventListener('submit', (e) => {
+                    e.preventDefault();
+                    return this.addParameter(form);
+                });
+            }
+            
+            // Open dialog using jQuery UI
+            if (up.jQuery) {
+                up.jQuery(dialog).dialog();
+            }
+            
+            this.dialogInitialized = true;
+        }
+    }
+}
+
+// Toggle chevron function for accordion
+function toggleChevron(element) {
+    const icon = element.querySelector('i.fa');
+    if (icon) {
+        if (icon.classList.contains('fa-chevron-down')) {
+            icon.classList.remove('fa-chevron-down');
+            icon.classList.add('fa-chevron-up');
+        } else {
+            icon.classList.remove('fa-chevron-up');
+            icon.classList.add('fa-chevron-down');
+        }
+    }
+}
+
+// Make toggleChevron globally available
+window.toggleChevron = toggleChevron;
+
+// Global initialization function to replace Fluid component
+window.up = window.up || {};
+window.up.ParameterEditor = function(container, options) {
+    return new ModernParameterEditor(container, options);
+};
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-portal-gallery.js b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-portal-gallery.js
new file mode 100644
index 00000000000..9f5f29d8e64
--- /dev/null
+++ b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-portal-gallery.js
@@ -0,0 +1,728 @@
+/*
+ * Modern replacement for Fluid-based PortalGallery component
+ * Replaces up-layout-gallery.js with vanilla JavaScript implementation
+ */
+'use strict';
+
+class PortalGallery {
+    constructor(container, options = {}) {
+        this.container = typeof container === 'string' ? document.querySelector(container) : container;
+        this.options = { ...this.defaults, ...options };
+        this.panes = new Map();
+        this.isOpen = false;
+        this.init();
+    }
+
+    get defaults() {
+        return {
+            isOpen: false,
+            openSpeed: 500,
+            closeSpeed: 50
+        };
+    }
+
+    init() {
+        this.createPanes();
+        this.bindEvents();
+        
+        this.isOpen = false;
+        
+        const outer = document.querySelector('#customizeOptions');
+        const inner = this.container.querySelector('.gallery-inner');
+        
+        if (outer) outer.style.display = 'none';
+        if (inner) inner.style.display = 'none';
+        
+        const handle = this.container.querySelector('.handle span');
+        if (handle) handle.classList.remove('handle-arrow-up');
+        
+        if (this.options.isOpen) this.openGallery();
+    }
+
+    createPanes() {
+        // Create browse content pane
+        this.panes.set('add-content', new BrowseContentPane(this.container, this, {
+            key: 'add-content',
+            selectors: {
+                pane: '.add-content',
+                paneLink: '.add-content-link'
+            }
+        }));
+
+        // Create use content pane
+        this.panes.set('use-content', new UseContentPane(this.container, this, {
+            key: 'use-content',
+            selectors: {
+                pane: '.use-content',
+                paneLink: '.use-content-link'
+            }
+        }));
+
+        this.panes.set('skin', new SkinPane(this.container, this, {
+            key: 'skin',
+            selectors: {
+                pane: '.skins',
+                paneLink: '.skin-link'
+            }
+        }));
+
+        this.panes.set('layout', new LayoutPane(this.container, this, {
+            key: 'layout',
+            selectors: {
+                pane: '.layouts',
+                paneLink: '.layout-link'
+            }
+        }));
+    }
+
+    bindEvents() {
+        // Gallery handle click
+        const handle = this.container.querySelector('.handle span');
+        if (handle) {
+            handle.addEventListener('click', () => {
+                this.isOpen ? this.closeGallery() : this.openGallery();
+            });
+        }
+
+        // Customize button click
+        setTimeout(() => {
+            const customizeBtn = document.getElementById('customizeButton');
+            if (customizeBtn) {
+                customizeBtn.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.isOpen ? this.closeGallery() : this.openGallery();
+                });
+            }
+        }, 100);
+
+        // Close button
+        const closeBtn = this.container.querySelector('.close-button');
+        if (closeBtn) {
+            closeBtn.addEventListener('click', () => this.closeGallery());
+        }
+    }
+
+    openGallery() {
+        this.isOpen = true;
+        const handle = this.container.querySelector('.handle span');
+        const outer = document.querySelector('#customizeOptions');
+        const inner = this.container.querySelector('.gallery-inner');
+        
+        const canAddChildren = document.querySelector('#portalPageBodyColumns .portal-page-column.canAddChildren, #portalPageBodyColumns .portal-page-column.up-fragment-admin');
+        if (canAddChildren) {
+            this.panes.get('add-content').showLoadingOnly();
+        } else {
+            this.panes.get('use-content').showLoadingOnly();
+            this.hidePaneLink('add-content');
+        }
+        
+        if (handle) handle.classList.add('handle-arrow-up');
+        
+        const customizeBtn = document.getElementById('customizeButton');
+        const arrow = customizeBtn?.querySelector('i');
+        if (arrow) arrow.className = 'fa fa-caret-up';
+
+        if (outer && inner) {
+            inner.style.display = 'block';
+            up.jQuery(outer).slideDown(300, 'swing', () => {
+                if (canAddChildren) {
+                    this.panes.get('add-content').initializeContent();
+                } else {
+                    this.panes.get('use-content').initializeContent();
+                }
+            });
+        }
+    }
+
+    closeGallery() {
+        this.isOpen = false;
+        const handle = this.container.querySelector('.handle span');
+        const outer = document.querySelector('#customizeOptions');
+        const inner = this.container.querySelector('.gallery-inner');
+        
+        if (handle) handle.classList.remove('handle-arrow-up');
+        
+        const customizeBtn = document.getElementById('customizeButton');
+        const arrow = customizeBtn?.querySelector('i');
+        if (arrow) arrow.className = 'fa fa-caret-down';
+
+        if (outer && inner) {
+            up.jQuery(outer).slideUp(300, 'swing', () => {
+                inner.style.display = 'none';
+            });
+        }
+    }
+
+    showPane(key) {
+        this.panes.forEach((pane, paneKey) => {
+            if (paneKey === key) {
+                pane.showPane();
+            } else {
+                pane.hidePane();
+            }
+        });
+    }
+
+    hidePaneLink(key) {
+        const pane = this.panes.get(key);
+        if (pane && pane.hidePaneLink) {
+            pane.hidePaneLink();
+        }
+    }
+
+    showPaneLink(key) {
+        const pane = this.panes.get(key);
+        if (pane && pane.showPaneLink) {
+            pane.showPaneLink();
+        }
+    }
+
+    showLoading() {
+        const portletList = this.container.querySelector('#addContentPortletList, #useContentPortletList, .portlet-list');
+        
+        if (portletList) {
+            portletList.innerHTML = `
+                <div class="loading-indicator" style="
+                    width: 100%;
+                    height: 200px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    flex-direction: column;
+                    color: #666;
+                    font-size: 14px;
+                ">
+                    <div style="
+                        width: 24px;
+                        height: 24px;
+                        border: 3px solid #ddd;
+                        border-top: 3px solid #007bff;
+                        border-radius: 50%;
+                        animation: spin 1s linear infinite;
+                        margin-bottom: 15px;
+                    "></div>
+                    Loading portlets...
+                </div>
+                <style>
+                    @keyframes spin {
+                        0% { transform: rotate(0deg); }
+                        100% { transform: rotate(360deg); }
+                    }
+                </style>
+            `;
+        }
+    }
+
+    hideLoading() {
+        // The loading indicator will be replaced by actual content in PortletListView.renderPortlets()
+    }
+}
+
+class GalleryPane {
+    constructor(container, gallery, options = {}) {
+        this.container = container;
+        this.gallery = gallery;
+        this.options = options;
+        this.initialized = false;
+        this.bindEvents();
+    }
+
+    bindEvents() {
+        const paneLink = this.container.querySelector(this.options.selectors.paneLink);
+        if (paneLink) {
+            paneLink.addEventListener('click', () => {
+                this.gallery.showPane(this.options.key);
+            });
+        }
+    }
+
+    showPane() {
+        const pane = this.container.querySelector(this.options.selectors.pane);
+        const paneLink = this.container.querySelector(this.options.selectors.paneLink);
+        
+        if (pane) pane.style.display = 'block';
+        if (paneLink) paneLink.classList.add('active');
+        
+        if (!this.initialized) {
+            if (this.options.onInitialize) {
+                this.options.onInitialize();
+            }
+            this.initialized = true;
+        }
+    }
+
+    hidePane() {
+        const pane = this.container.querySelector(this.options.selectors.pane);
+        const paneLink = this.container.querySelector(this.options.selectors.paneLink);
+        
+        if (pane) pane.style.display = 'none';
+        if (paneLink) paneLink.classList.remove('active');
+    }
+
+    hidePaneLink() {
+        const pane = this.container.querySelector(this.options.selectors.pane);
+        const paneLink = this.container.querySelector(this.options.selectors.paneLink);
+        
+        if (pane) pane.style.display = 'none';
+        if (paneLink) {
+            paneLink.style.display = 'none';
+            paneLink.classList.remove('active');
+        }
+    }
+
+    showPaneLink() {
+        const paneLink = this.container.querySelector(this.options.selectors.paneLink);
+        if (paneLink) paneLink.style.display = 'block';
+    }
+}
+
+class BrowseContentPane extends GalleryPane {
+    constructor(container, gallery, options) {
+        super(container, gallery, options);
+        this.portletBrowser = null;
+    }
+
+    showLoadingOnly() {
+        const pane = this.container.querySelector(this.options.selectors.pane);
+        const paneLink = this.container.querySelector(this.options.selectors.paneLink);
+        
+        if (pane) pane.style.display = 'block';
+        if (paneLink) paneLink.classList.add('active');
+        
+        if (!this.initialized) {
+            this.gallery.showLoading();
+        }
+    }
+    
+    initializeContent() {
+        if (!this.initialized) {
+            const pane = this.container.querySelector(this.options.selectors.pane);
+            const startTime = Date.now();
+            
+            this.portletBrowser = new PortletBrowser(pane, this.gallery, {
+                portletListUrl: 'v4-3/dlm/portletRegistry.json',
+                buttonText: 'Add',
+                buttonAction: 'add',
+                onLoad: () => {
+                    const delay = Math.max(0, 1000 - (Date.now() - startTime));
+                    setTimeout(() => this.gallery.hideLoading(), delay);
+                }
+            });
+            this.initialized = true;
+        }
+    }
+    
+    showPane() {
+        // For tab switching after initialization
+        const pane = this.container.querySelector(this.options.selectors.pane);
+        const paneLink = this.container.querySelector(this.options.selectors.paneLink);
+        
+        if (pane) pane.style.display = 'block';
+        if (paneLink) paneLink.classList.add('active');
+    }
+}
+
+class UseContentPane extends GalleryPane {
+    constructor(container, gallery, options) {
+        super(container, gallery, options);
+        this.portletBrowser = null;
+    }
+
+    showLoadingOnly() {
+        const pane = this.container.querySelector(this.options.selectors.pane);
+        const paneLink = this.container.querySelector(this.options.selectors.paneLink);
+        
+        if (pane) pane.style.display = 'block';
+        if (paneLink) paneLink.classList.add('active');
+        
+        if (!this.initialized) {
+            this.gallery.showLoading();
+        }
+    }
+    
+    initializeContent() {
+        if (!this.initialized) {
+            const pane = this.container.querySelector(this.options.selectors.pane);
+            const startTime = Date.now();
+            
+            this.portletBrowser = new PortletBrowser(pane, this.gallery, {
+                portletListUrl: 'v4-3/dlm/portletRegistry.json',
+                buttonText: 'Use',
+                buttonAction: 'use',
+                onLoad: () => {
+                    const delay = Math.max(0, 1000 - (Date.now() - startTime));
+                    setTimeout(() => this.gallery.hideLoading(), delay);
+                }
+            });
+            this.initialized = true;
+        }
+    }
+    
+    showPane() {
+        // For tab switching after initialization
+        const pane = this.container.querySelector(this.options.selectors.pane);
+        const paneLink = this.container.querySelector(this.options.selectors.paneLink);
+        
+        if (pane) pane.style.display = 'block';
+        if (paneLink) paneLink.classList.add('active');
+        
+        // Initialize content if not already done
+        if (!this.initialized) {
+            this.initializeContent();
+        }
+    }
+}
+
+class SkinPane extends GalleryPane {
+    constructor(container, gallery, options) {
+        super(container, gallery, options);
+        this.skinSelector = null;
+    }
+
+    showPane() {
+        if (!this.initialized) {
+            this.gallery.showLoading();
+            
+            // Initialize skin selector
+            const paneElement = this.container.querySelector(this.options.selectors.pane);
+            if (paneElement) {
+                this.skinSelector = new SkinSelector(paneElement, {
+                    onSelectSkin: (skin) => {
+                        // Use the modern persistence component
+                        const persistence = new ModernLayoutPreferencesPersistence(document.body, {
+                            saveLayoutUrl: '/uPortal/api/layout'
+                        });
+                        
+                        persistence.update({
+                            action: 'chooseSkin',
+                            skinName: skin.key
+                        }, () => {
+                            window.location.reload();
+                        });
+                    }
+                });
+            }
+            
+            this.initialized = true;
+            this.gallery.hideLoading();
+        }
+
+        super.showPane();
+    }
+}
+
+// PortletBrowser is now in modern-portlet-browser.js
+
+// PortletRegistry is now in modern-portlet-browser.js
+
+// CategoryListView is now in modern-portlet-browser.js
+
+// PortletListView is now in modern-portlet-browser.js
+
+class LayoutPane extends GalleryPane {
+    constructor(container, gallery, options) {
+        super(container, gallery, options);
+        this.layoutSelector = null;
+    }
+
+    showPane() {
+        if (!this.initialized) {
+            this.gallery.showLoading();
+            
+            // Initialize layout selector
+            const paneElement = this.container.querySelector(this.options.selectors.pane);
+            if (paneElement) {
+                this.layoutSelector = new LayoutSelector(paneElement, {
+                    onLayoutSelect: (layout) => {
+                        // Use the modern persistence component
+                        const persistence = new ModernLayoutPreferencesPersistence(document.body, {
+                            saveLayoutUrl: '/uPortal/api/layout'
+                        });
+                        
+                        const getActiveTabId = () => {
+                            const activeTab = document.querySelector('#portalNavigationList li.active');
+                            return activeTab ? window.up.defaultNodeIdExtractor(activeTab) : null;
+                        };
+                        
+                        // Server expects at least 2 widths, pad single column with 0
+                        const widths = layout.columns.length === 1 ? [layout.columns[0], 0] : layout.columns;
+                        
+                        const options = {
+                            action: 'changeColumns',
+                            tabId: getActiveTabId(),
+                            widths: widths
+                        };
+                        
+                        persistence.update(options, (data) => {
+                            if (data && data.error) {
+                                console.error('Layout update error:', data.error);
+                            } else {
+                                window.location.reload();
+                            }
+                        });
+                    }
+                });
+            }
+            
+            this.initialized = true;
+            this.gallery.hideLoading();
+        }
+
+        super.showPane();
+    }
+}
+
+class SkinSelector {
+    constructor(container, options = {}) {
+        this.container = container;
+        this.options = options;
+        this.skins = [];
+        this.init();
+    }
+
+    async init() {
+        try {
+            await this.loadSkins();
+            this.render();
+        } catch (error) {
+            console.error('Failed to load skins:', error);
+        }
+    }
+
+    async loadSkins() {
+        // Try to load skinList.xml from respondr skin directory
+        try {
+            const response = await fetch('/uPortal/media/skins/respondr/skinList.xml');
+            if (response.ok) {
+                const xmlText = await response.text();
+                const parser = new DOMParser();
+                const xmlDoc = parser.parseFromString(xmlText, 'text/xml');
+                this.parseSkinListXML(xmlDoc);
+            } else {
+                this.useDefaultSkins();
+            }
+        } catch (error) {
+            console.warn('Could not load skinList.xml, using default skins:', error);
+            this.useDefaultSkins();
+        }
+    }
+
+    parseSkinListXML(xmlDoc) {
+        const skinNodes = xmlDoc.querySelectorAll('skin');
+        this.skins = [];
+        
+        skinNodes.forEach(skinNode => {
+            const key = skinNode.querySelector('skin-key')?.textContent;
+            const name = skinNode.querySelector('skin-name')?.textContent;
+            const description = skinNode.querySelector('skin-description')?.textContent;
+            
+            if (key && name) {
+                this.skins.push({
+                    key,
+                    name,
+                    description: description || name,
+                    thumbnailPath: `/uPortal/media/skins/respondr/${key}/thumb.gif`
+                });
+            }
+        });
+    }
+
+    useDefaultSkins() {
+        // Fallback to available skins
+        this.skins = [
+            { key: 'defaultSkin', name: 'Default Skin', description: 'Basic responsive skin', thumbnailPath: '/uPortal/media/skins/respondr/defaultSkin/thumb.gif' }
+        ];
+    }
+
+    render() {
+        const skinsList = this.container.querySelector('.skins-list');
+        if (!skinsList) return;
+
+        skinsList.innerHTML = '';
+        
+        this.skins.forEach(skin => {
+            const skinEl = this.createSkinElement(skin);
+            skinsList.appendChild(skinEl);
+        });
+    }
+
+    createSkinElement(skin) {
+        const skinEl = document.createElement('li');
+        skinEl.className = 'results-item skin';
+        
+        skinEl.innerHTML = `
+            <div class="ri-wrapper skins-wrapper">
+                <a class="ri-link skin-link" href="#">
+                    <div class="ri-titlebar skin-titlebar">${skin.name}</div>
+                    <div class="ri-content">
+                        <div class="ri-icon skin-thumb" style="background: url(${skin.thumbnailPath}) top left no-repeat;">
+                            <span>Thumbnail</span>
+                        </div>
+                    </div>
+                </a>
+            </div>
+        `;
+        
+        const linkEl = skinEl.querySelector('.skin-link');
+        if (linkEl) {
+            linkEl.addEventListener('click', (e) => {
+                e.preventDefault();
+                
+                // Remove active class from all skins
+                this.container.querySelectorAll('.skin.selected').forEach(el => {
+                    el.classList.remove('selected');
+                });
+                
+                // Add active class to selected skin
+                skinEl.classList.add('selected');
+                
+                // Fire selection event
+                if (this.options.onSelectSkin) {
+                    this.options.onSelectSkin(skin);
+                }
+            });
+        }
+        
+        return skinEl;
+    }
+}
+
+class LayoutSelector {
+    constructor(container, options = {}) {
+        this.container = container;
+        this.options = options;
+        this.layouts = [
+            {nameKey: 'fullWidth', columns: [100]},
+            {nameKey: 'narrowWide', columns: [40, 60]},
+            {nameKey: 'even', columns: [50, 50]},
+            {nameKey: 'wideNarrow', columns: [60, 40]},
+            {nameKey: 'even', columns: [33, 34, 33]},
+            {nameKey: 'narrowWideNarrow', columns: [25, 50, 25]},
+            {nameKey: 'even', columns: [25, 25, 25, 25]}
+        ];
+        this.strings = {
+            fullWidth: 'Full-width',
+            narrowWide: 'Narrow, wide',
+            even: 'Even',
+            wideNarrow: 'Wide, narrow',
+            narrowWideNarrow: 'Narrow, wide, narrow',
+            column: 'Column',
+            columns: 'Columns'
+        };
+        this.currentLayout = this.getCurrentLayout().slice();
+        this.init();
+    }
+
+    getCurrentLayout() {
+        const columns = [];
+        const columnElements = document.querySelectorAll('#portalPageBodyColumns > [id^=column_]');
+        
+        columnElements.forEach((col) => {
+            const colMdClass = col.className.match(/col-md-([0-9]+)/);
+            if (colMdClass) {
+                columns.push(Math.round((Number(colMdClass[1]) / 12) * 100));
+            } else {
+                const flClass = col.className.match(/fl-container-flex([0-9]+)/);
+                if (flClass) columns.push(Number(flClass[1]));
+            }
+        });
+        
+        if (columns.length === 0 && columnElements.length > 0) {
+            const equalWidth = Math.floor(100 / columnElements.length);
+            for (let i = 0; i < columnElements.length; i++) columns.push(equalWidth);
+        }
+        
+        return columns.length > 0 ? columns : [100];
+    }
+
+    init() {
+        this.render();
+    }
+
+    layoutsMatch(layout1, layout2) {
+        if (layout1.length !== layout2.length) return false;
+        
+        // Allow for small differences due to Bootstrap grid rounding
+        for (let i = 0; i < layout1.length; i++) {
+            const diff = Math.abs(layout1[i] - layout2[i]);
+            if (diff > 5) return false; // Allow up to 5% difference
+        }
+        return true;
+    }
+
+    render() {
+        const layoutsList = this.container.querySelector('.layouts-list');
+        if (!layoutsList) return;
+
+        this.currentLayout = this.getCurrentLayout().slice();
+        layoutsList.innerHTML = '';
+        this.layouts.forEach(layout => {
+            layoutsList.appendChild(this.createLayoutElement(layout));
+        });
+    }
+
+    createLayoutElement(layout) {
+        const layoutEl = document.createElement('li');
+        const isSelected = this.layoutsMatch(this.currentLayout, layout.columns);
+        
+        layoutEl.className = `results-item layout ${isSelected ? 'selected' : ''}`;
+        
+        const columnText = layout.columns.length === 1 ? this.strings.column : this.strings.columns;
+        const layoutName = this.strings[layout.nameKey] || layout.nameKey;
+        
+        layoutEl.innerHTML = `
+            <div class="ri-wrapper layout-wrapper">
+                <a class="ri-link layout-link" href="#">
+                    <div class="ri-titlebar layout-titlebar">${layout.columns.length} ${columnText}</div>
+                    <div class="ri-content">
+                        <div class="ri-icon layout-thumb" style="background: url(/uPortal/media/skins/respondr/common/images/layout_${layoutString}.svg) top left no-repeat;">
+                            <span>Thumbnail</span>
+                        </div>
+                        <div class="ri-description layout-description">${layoutName}</div>
+                    </div>
+                </a>
+            </div>
+        `;
+        
+        const linkEl = layoutEl.querySelector('.layout-link');
+        if (linkEl) {
+            linkEl.addEventListener('click', (e) => {
+                e.preventDefault();
+                
+                // Check if this is already the current layout
+                if (this.layoutsMatch(this.currentLayout, layout.columns)) return;
+                
+                // Remove selected class from all layouts
+                this.container.querySelectorAll('.layout.selected').forEach(el => {
+                    el.classList.remove('selected');
+                });
+                
+                // Add selected class to clicked layout
+                layoutEl.classList.add('selected');
+                
+                // Fire selection event BEFORE updating current layout
+                if (this.options.onLayoutSelect) {
+                    this.options.onLayoutSelect(layout);
+                }
+                
+                // Update current layout after successful callback
+                this.currentLayout = layout.columns.slice();
+            });
+        }
+        
+        return layoutEl;
+    }
+}
+
+// LayoutDraggableManager is now in modern-layout-draggable-manager.js
+
+// Global initialization function to replace Fluid component
+window.up = window.up || {};
+window.up.PortalGallery = function(container, options) {
+    const gallery = new PortalGallery(container, options);
+    window.up.gallery = gallery; // Store global reference
+    return gallery;
+};
+
+// Export for use by up.LayoutPreferences
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-portlet-browser.js b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-portlet-browser.js
new file mode 100644
index 00000000000..2f87e973b47
--- /dev/null
+++ b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-portlet-browser.js
@@ -0,0 +1,503 @@
+/*
+ * Modern replacement for Fluid-based PortletBrowser component
+ * Replaces up-portlet-browser.js with vanilla JavaScript implementation
+ */
+'use strict';
+
+class PortletBrowser {
+    constructor(container, gallery, options = {}) {
+        this.container = container;
+        this.gallery = gallery;
+        this.options = { buttonText: 'Add', buttonAction: 'add', ...options };
+        this.registry = null;
+        this.dragManager = null;
+        this.state = {
+            currentCategory: '',
+            portletRegex: null
+        };
+        this.init();
+    }
+
+    async init() {
+        try {
+            this.registry = new PortletRegistry(this.options.portletListUrl);
+            await this.registry.load();
+            
+            // Initialize drag manager for Add Content tab
+            if (this.options.buttonAction === 'add') {
+                this.dragManager = window.up.LayoutDraggableManager(this.container, {
+                    onDropTarget: (method, targetID, portletData) => {
+                        this.onPortletDrop(portletData, method, targetID);
+                    }
+                });
+            }
+            
+            // Initialize category and portlet views
+            this.categoryView = new CategoryListView(this.container, this);
+            this.portletView = new PortletListView(this.container, this);
+            
+            // Set up search
+            this.setupSearch();
+            
+            setTimeout(() => {
+                if (this.options.onLoad) this.options.onLoad();
+            }, 1000);
+            
+        } catch (error) {
+            console.error('FLOW: PortletBrowser init failed:', error);
+            // Still call onLoad on error to hide loading spinner
+            if (this.options.onLoad) {
+                this.options.onLoad();
+            }
+        }
+    }
+
+    setupSearch() {
+        const searchInput = this.container.querySelector('.portlet-search-input');
+        if (searchInput) {
+            searchInput.addEventListener('input', (e) => {
+                const query = e.target.value.trim();
+                this.state.portletRegex = query ? new RegExp(query, 'i') : null;
+                this.portletView.refresh();
+            });
+        }
+    }
+
+    onCategorySelect(category) {
+        this.state.currentCategory = category.id;
+        this.categoryView.refresh();
+        this.portletView.refresh();
+    }
+
+    onPortletSelect(portlet) {
+        if (this.options.buttonAction === 'use') {
+            // "Use It" functionality - redirect to portlet's maximized view
+            window.location = `/uPortal/p/${portlet.fname}`;
+            return;
+        }
+        
+        // "Add" functionality - use the same persistence mechanism as the original Fluid implementation
+        this.addPortletToPage(portlet);
+    }
+    
+    onPortletDrop(portlet, method, targetID) {
+        // Handle drag and drop portlet addition
+        const options = {
+            action: 'addPortlet',
+            channelID: portlet.id,
+            elementID: targetID,
+            position: method
+        };
+        
+        // Use the existing persistence component
+        if (window.up && window.up.LayoutPreferencesPersistence) {
+            const persistence = window.up.LayoutPreferencesPersistence(document.body, {
+                saveLayoutUrl: '/uPortal/api/layout'
+            });
+            
+            persistence.update(options, (data) => {
+                if (data.error) {
+                    console.error('Error adding portlet:', data.error);
+                } else {
+                    // Reload page to show new portlet
+                    window.location.reload();
+                }
+            });
+        }
+    }
+    
+    addPortletToPage(portlet) {
+        const getActiveTabId = () => {
+            const activeTab = document.querySelector('#portalNavigationList li.active');
+            return activeTab ? window.up.defaultNodeIdExtractor(activeTab) : null;
+        };
+        
+        const options = {
+            action: 'addPortlet',
+            channelID: portlet.id
+        };
+        
+        // Find the first movable portlet to insert before
+        const firstChannel = document.querySelector('[id^=portlet_].movable, [id^=portlet_].up-fragment-admin');
+        
+        if (!firstChannel) {
+            // No content on page, add to tab
+            options.elementID = getActiveTabId();
+        } else {
+            // Insert before first movable portlet
+            options.elementID = window.up.defaultNodeIdExtractor(firstChannel);
+            options.position = 'insertBefore';
+        }
+        
+        // Use the modern persistence component
+        const persistence = new ModernLayoutPreferencesPersistence(document.body, {
+            saveLayoutUrl: '/uPortal/api/layout'
+        });
+        
+        persistence.update(options, (data) => {
+            if (data.error) {
+                console.error('Error adding portlet:', data.error);
+            } else {
+                // Reload page to show new portlet
+                window.location.reload();
+            }
+        });
+    }
+}
+
+class PortletRegistry {
+    constructor(url) {
+        this.url = url;
+        this.categories = [];
+        this.portlets = [];
+    }
+
+    async load() {
+        return new Promise((resolve, reject) => {
+            up.jQuery.ajax({
+                url: '/uPortal/api/portletList',
+                success: (data) => {
+                    this.processRegistryData(data);
+                    resolve();
+                },
+                error: (xhr, status, error) => {
+                    console.error('Failed to load portlet registry:', error);
+                    this.categories = [];
+                    this.portlets = [];
+                    resolve();
+                },
+                dataType: 'json'
+            });
+        });
+    }
+
+    processRegistryData(data) {
+        this.categories = [];
+        this.portlets = [];
+        
+        if (data.registry && data.registry.categories) {
+            data.registry.categories.forEach(category => {
+                this.processCategory(category);
+            });
+        }
+        
+        if (data.registry && (data.registry.channels || data.registry.portlets)) {
+            const existingIds = new Set(this.portlets.map(p => p.id));
+            (data.registry.channels || data.registry.portlets).forEach(channel => {
+                if (!existingIds.has(channel.id)) {
+                    this.portlets.push(this.createPortlet(channel));
+                }
+            });
+        }
+    }
+    
+    processCategory(categoryData) {
+        const category = {
+            id: categoryData.id,
+            name: categoryData.name,
+            description: categoryData.description,
+            deepPortlets: []
+        };
+        
+        const channels = categoryData.channels || categoryData.portlets || [];
+        const existingIds = new Set(this.portlets.map(p => p.id));
+        channels.forEach(channel => {
+            const portlet = this.createPortlet(channel);
+            portlet.categoryId = categoryData.id;
+            if (!existingIds.has(channel.id)) {
+                this.portlets.push(portlet);
+                existingIds.add(channel.id);
+            }
+            category.deepPortlets.push(portlet);
+        });
+        
+        const subcats = categoryData.categories || categoryData.subcategories || [];
+        subcats.forEach(subCat => this.processCategory(subCat));
+        
+        this.categories.push(category);
+    }
+    
+    createPortlet(channel) {
+        return {
+            id: channel.id,
+            title: channel.title,
+            name: channel.name,
+            fname: channel.fname,
+            description: channel.description,
+            iconUrl: channel.iconUrl || channel.parameters?.iconUrl?.value || '/ResourceServingWebapp/rs/tango/0.8.90/32x32/categories/applications-other.png'
+        };
+    }
+
+    getAllCategories() {
+        return this.categories;
+    }
+
+    getAllPortlets() {
+        return this.portlets;
+    }
+
+    getMemberPortlets(categoryId, deep = false) {
+        if (!categoryId) return this.portlets; // Return all for empty category (ALL)
+        
+        const category = this.categories.find(cat => cat.id === categoryId);
+        return category ? category.deepPortlets : [];
+    }
+}
+
+class CategoryListView {
+    constructor(container, browser) {
+        this.container = container.querySelector('.categories');
+        this.browser = browser;
+        if (this.container) {
+            this.refresh();
+        }
+    }
+
+    refresh() {
+        if (!this.container || !this.browser.registry) return;
+
+        // Build categories list
+        const categories = [
+            { id: '', name: 'ALL', description: 'All Categories' },
+            ...this.browser.registry.getAllCategories()
+                .filter(cat => 
+                    cat.id !== 'local.1' && 
+                    cat.name !== 'uPortal' && 
+                    cat.deepPortlets && 
+                    cat.deepPortlets.length > 0
+                )
+                .sort((a, b) => a.name.localeCompare(b.name))
+        ];
+
+        // Remove existing category elements (but keep h4)
+        const existingUls = this.container.querySelectorAll('ul');
+        existingUls.forEach(ul => {
+            if (!ul.querySelector('.category-choice-container')) {
+                ul.remove();
+            }
+        });
+        
+        // Find h4 element
+        const h4 = this.container.querySelector('h4');
+        if (!h4) return;
+        
+        // Create separate ul for each category in reverse order to maintain correct sequence
+        for (let i = categories.length - 1; i >= 0; i--) {
+            const category = categories[i];
+            const isActive = category.id === this.browser.state.currentCategory;
+            const ul = this.createCategoryElement(category, isActive, i === 0);
+            h4.insertAdjacentElement('afterend', ul);
+        }
+    }
+
+    createCategoryElement(category, isActive, isFirst = false) {
+        const ul = document.createElement('ul');
+        const li = document.createElement('li');
+        li.className = `category-choice ${isActive ? 'active' : ''} ${isFirst ? 'first' : ''}`;
+        
+        li.innerHTML = `<a href="#" class="category-choice-link"><span class="category-choice-name">${category.name}</span></a>`;
+        
+        const linkEl = li.querySelector('.category-choice-link');
+        if (linkEl) {
+            linkEl.addEventListener('click', (e) => {
+                e.preventDefault();
+                this.browser.onCategorySelect(category);
+            });
+        }
+        
+        ul.appendChild(li);
+        return ul;
+    }
+}
+
+class PortletListView {
+    constructor(container, browser) {
+        this.container = container;
+        this.browser = browser;
+        this.currentPage = 0;
+        this.itemsPerRow = 3; // Default 3 columns
+        this.rowsPerPage = 2; // Default 2 rows
+        this.refresh();
+        this.setupResizeObserver();
+    }
+
+    setupResizeObserver() {
+        // Recalculate layout when container size changes
+        if (window.ResizeObserver) {
+            const observer = new ResizeObserver(() => {
+                this.calculateLayout();
+                this.refresh();
+            });
+            
+            const listContainer = this.container.querySelector('.portlet-list, .results-list');
+            if (listContainer) {
+                observer.observe(listContainer);
+            }
+        }
+    }
+
+    calculateLayout() {
+        const listContainer = this.container.querySelector('.portlet-list, .results-list');
+        if (!listContainer) return;
+
+        const containerWidth = listContainer.clientWidth;
+        const containerHeight = listContainer.clientHeight;
+        
+        // Estimate portlet dimensions (similar to release version)
+        const portletWidth = 648; // From release CSS analysis
+        const portletHeight = 82;  // From release CSS analysis
+        const margin = 5; // From release margins
+        
+        // Calculate how many fit horizontally
+        this.itemsPerRow = Math.max(1, Math.floor((containerWidth + margin) / (portletWidth + margin)));
+        
+        // Calculate how many rows fit vertically
+        this.rowsPerPage = Math.max(1, Math.floor((containerHeight + margin) / (portletHeight + margin)));
+        
+
+    }
+
+    get pageSize() {
+        return 6; // Fixed: 2 rows × 3 columns like release
+    }
+
+    refresh() {
+        if (!this.container || !this.browser.registry) return;
+
+        // Get filtered portlets
+        const portlets = this.getFilteredPortlets();
+        
+        // Simple pagination
+        const startIdx = this.currentPage * this.pageSize;
+        const endIdx = startIdx + this.pageSize;
+        const pagePortlets = portlets.slice(startIdx, endIdx);
+        
+        // Render portlets
+        this.renderPortlets(pagePortlets);
+        this.renderPagination(portlets.length);
+    }
+
+    getFilteredPortlets() {
+        let portlets = this.browser.state.currentCategory 
+            ? this.browser.registry.getMemberPortlets(this.browser.state.currentCategory, true)
+            : this.browser.registry.getAllPortlets();
+
+        // Apply search filter
+        if (this.browser.state.portletRegex) {
+            portlets = portlets.filter(portlet => 
+                this.browser.state.portletRegex.test(portlet.title) ||
+                this.browser.state.portletRegex.test(portlet.name) ||
+                this.browser.state.portletRegex.test(portlet.fname) ||
+                this.browser.state.portletRegex.test(portlet.description)
+            );
+        }
+
+        return portlets.sort((a, b) => a.title.localeCompare(b.title));
+    }
+
+    renderPortlets(portlets) {
+        const listContainer = this.container.querySelector('#addContentPortletList, #useContentPortletList, .portlet-list');
+        if (!listContainer) return;
+
+        // Calculate layout first
+        this.calculateLayout();
+        
+        listContainer.innerHTML = '';
+        
+        portlets.forEach(portlet => {
+            const portletEl = this.createPortletElement(portlet);
+            listContainer.appendChild(portletEl);
+        });
+        
+        // Notify drag manager if it exists
+        if (this.browser.dragManager) {
+            // Small delay to ensure DOM is ready
+            setTimeout(() => {
+                this.browser.dragManager.initializeDraggables();
+            }, 0);
+        }
+    }
+
+    createPortletElement(portlet) {
+        const portletEl = document.createElement('li');
+        portletEl.className = 'result-item portlet';
+        portletEl.title = `${portlet.title} (${portlet.name})`;
+        portletEl.setAttribute('data-portlet-id', portlet.id);
+        
+        portletEl.innerHTML = `
+            <div class="ri-wrapper portlet-wrapper">
+                <a class="ri-utility portlet-thumb-gripper" href="#" title="Drag to add content"><span>Drag Handle</span></a>
+                <a href="#" class="ri-link portlet-thumb-link">
+                    <span>${this.browser.options.buttonText}</span>
+                </a>
+                <div class="ri-content portlet-thumb-content ui-helper-clearfix">
+                    <div class="ri-titlebar portlet-thumb-titlebar">${portlet.title}</div>
+                    <div class="ri-icon portlet-thumb-icon" style="background: url(${portlet.iconUrl || '/ResourceServingWebapp/rs/tango/0.8.90/32x32/categories/applications-other.png'}) top left no-repeat;"><span>Thumbnail</span></div>
+                    <div class="ri-description portlet-thumb-description">${portlet.description || ''}</div>
+                </div>
+            </div>
+        `;
+        
+        const linkEl = portletEl.querySelector('.portlet-thumb-link');
+        if (linkEl) {
+            linkEl.addEventListener('click', (e) => {
+                e.preventDefault();
+                this.browser.onPortletSelect(portlet);
+            });
+        }
+        
+        return portletEl;
+    }
+
+    renderPagination(totalItems) {
+        const totalPages = Math.ceil(totalItems / this.pageSize);
+        if (totalPages <= 1) {
+            // Hide pager if only one page
+            const pagerEl = this.container.querySelector('.pager');
+            if (pagerEl) pagerEl.style.display = 'none';
+            return;
+        }
+
+        const pagerEl = this.container.querySelector('.pager');
+        if (pagerEl) {
+            pagerEl.removeAttribute('style'); // Remove inline styles to allow CSS
+            pagerEl.innerHTML = `
+                <div class="pager-button-up flc-pager-previous ${this.currentPage === 0 ? 'fl-pager-disabled' : ''}">
+                    <a class="pager-button-up-inner" href="#">
+                        <span></span>
+                    </a>
+                </div>
+                <div class="pager-button-down flc-pager-next ${this.currentPage === totalPages - 1 ? 'fl-pager-disabled' : ''}">
+                    <a class="pager-button-down-inner" href="#">
+                        <span></span>
+                    </a>
+                </div>
+            `;
+            
+            const prevBtn = pagerEl.querySelector('.pager-button-up-inner');
+            const nextBtn = pagerEl.querySelector('.pager-button-down-inner');
+            
+            prevBtn?.addEventListener('click', (e) => {
+                e.preventDefault();
+                if (this.currentPage > 0) {
+                    this.currentPage--;
+                    this.refresh();
+                }
+            });
+            
+            nextBtn?.addEventListener('click', (e) => {
+                e.preventDefault();
+                if (this.currentPage < totalPages - 1) {
+                    this.currentPage++;
+                    this.refresh();
+                }
+            });
+        }
+    }
+}
+
+// Global initialization function to replace Fluid component
+window.up = window.up || {};
+window.up.PortletBrowser = function(container, gallery, options) {
+    return new PortletBrowser(container, gallery, options);
+};
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-portlet-registry.js b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-portlet-registry.js
new file mode 100644
index 00000000000..4acb422fa22
--- /dev/null
+++ b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-portlet-registry.js
@@ -0,0 +1,206 @@
+/*
+ * Licensed to Apereo under one or more contributor license
+ * agreements. See the NOTICE file distributed with this work
+ * for additional information regarding copyright ownership.
+ * Apereo licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file
+ * except in compliance with the License.  You may obtain a
+ * copy of the License at the following location:
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+'use strict';
+var up = up || {};
+
+/**
+ * Modern PortletRegistry - no Fluid dependencies
+ */
+class ModernPortletRegistry {
+    constructor(container, options = {}) {
+        this.container = container;
+        this.options = {
+            portletListUrl: null,
+            allCategoriesName: 'All',
+            ...options
+        };
+        this.state = {
+            portlets: [],
+            categories: []
+        };
+        this.events = {
+            onLoad: []
+        };
+        
+        this.getRegistry();
+    }
+
+    // Event system
+    on(event, callback) {
+        if (!this.events[event]) this.events[event] = [];
+        this.events[event].push(callback);
+    }
+
+    fire(event, ...args) {
+        if (this.events[event]) {
+            this.events[event].forEach(callback => callback(...args));
+        }
+    }
+
+    createPortlet(json) {
+        return {
+            id: json.id,
+            description: json.description,
+            fname: json.fname,
+            title: json.title,
+            name: json.name,
+            state: json.state,
+            type: json.typeId,
+            iconUrl: json.iconUrl,
+        };
+    }
+
+    createCategory(json) {
+        return {
+            id: json.id,
+            name: json.name,
+            description: json.description,
+            categories: [],
+            deepCategories: [],
+            portlets: [],
+            deepPortlets: [],
+        };
+    }
+
+    processCategory(category) {
+        if (this.state.categories[category.id]) {
+            return this.state.categories[category.id];
+        }
+
+        const c = this.createCategory(category);
+
+        // Process subcategories
+        if (category.categories) {
+            category.categories.forEach(subCategory => {
+                const processed = this.processCategory(subCategory);
+                c.categories.push(processed);
+                c.categories[processed.id] = processed;
+
+                if (!c.deepCategories[processed.id]) {
+                    c.deepCategories.push(processed);
+                    c.deepCategories[processed.id] = processed;
+                }
+
+                // Add deep members
+                processed.deepCategories.forEach(member => {
+                    if (!c.deepCategories[member.id]) {
+                        c.deepCategories.push(member);
+                        c.deepCategories[member.id] = member;
+                    }
+                });
+
+                processed.deepPortlets.forEach(member => {
+                    if (!c.deepPortlets['portlet.' + member.id]) {
+                        c.deepPortlets.push(member);
+                        c.deepPortlets['portlet.' + member.id] = member;
+                    }
+                });
+            });
+        }
+
+        // Process portlets
+        if (category.channels) {
+            category.channels.forEach(json => {
+                const portlet = this.createPortlet(json);
+                c.portlets.push(portlet);
+                c.portlets['portlet.' + portlet.id] = portlet;
+
+                if (!this.state.portlets['portlet.' + portlet.id]) {
+                    this.state.portlets.push(portlet);
+                    this.state.portlets['portlet.' + portlet.id] = portlet;
+                }
+
+                if (!c.deepPortlets['portlet.' + portlet.id]) {
+                    c.deepPortlets.push(portlet);
+                    c.deepPortlets['portlet.' + portlet.id] = portlet;
+                }
+            });
+        }
+
+        this.state.categories.push(c);
+        this.state.categories[c.id] = c;
+        return c;
+    }
+
+    async getRegistry() {
+        try {
+            const response = await fetch(this.options.portletListUrl);
+            const data = await response.json();
+
+            this.state.portlets = [];
+            this.state.categories = [];
+
+            if (data.registry.categories) {
+                data.registry.categories.forEach(category => {
+                    this.processCategory(category);
+                });
+            }
+
+            // Handle uncategorized channels
+            if (data.registry.channels && data.registry.channels.length > 0) {
+                this.processCategory({
+                    id: 'uncat',
+                    name: 'Uncategorized',
+                    description: 'Uncategorized Channels',
+                    categories: [],
+                    channels: data.registry.channels,
+                });
+            }
+
+            this.fire('onLoad');
+        } catch (error) {
+            console.error('Failed to load portlet registry:', error);
+        }
+    }
+
+    refreshRegistry() {
+        return this.getRegistry();
+    }
+
+    getPortlet(id) {
+        return this.state.portlets['portlet.' + id];
+    }
+
+    getCategory(key) {
+        return this.state.categories[key];
+    }
+
+    getMemberPortlets(key, deepMembers) {
+        const category = this.state.categories[key];
+        return deepMembers ? category.deepPortlets : category.portlets;
+    }
+
+    getMemberCategories(key, deepMembers) {
+        const category = this.state.categories[key];
+        return deepMembers ? category.deepCategories : category.categories;
+    }
+
+    getAllCategories() {
+        return this.state.categories;
+    }
+
+    getAllPortlets() {
+        return this.state.portlets;
+    }
+}
+
+// Maintain backward compatibility
+up.PortletRegistry = function(container, options) {
+    return new ModernPortletRegistry(container, options);
+};
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-rating-option.js b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-rating-option.js
new file mode 100644
index 00000000000..8e3531825c1
--- /dev/null
+++ b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-rating-option.js
@@ -0,0 +1,236 @@
+/*
+ * Modern replacement for rating modal functionality
+ * Replaces up-rating-option.js with vanilla JavaScript implementation
+ */
+'use strict';
+
+class ModernRatingModal {
+    constructor(element) {
+        this.element = element;
+        this.modal = null;
+        this.ratingValue = 0;
+        this.init();
+    }
+
+    init() {
+        this.createModal();
+        this.bindEvents();
+    }
+
+    createModal() {
+        const title = this.element.dataset.title;
+        const closeLabel = this.element.dataset['close.button.label'] || 'Close';
+        const saveLabel = this.element.dataset['save.button.label'] || 'Save';
+
+        const modalHTML = `
+            <div class="modal-dialog ratePortletModal-dialog" style="text-align:center; position:static">
+                <div class="modal-content" style="display:inline-block">
+                    <div class="modal-header">
+                        <h4 class="modal-title" style="white-space: nowrap"><strong>${title}</strong></h4>
+                    </div>
+                    <div class="modal-body" style="font-size:2em;">
+                        <div class="form-text ratingModalInstruct" style="font-size:0.5em; white-space:normal; word-wrap:break-word;"></div>
+                        <div class="rating-container">
+                            ${this.createStarRating()}
+                        </div>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">${closeLabel}</button>
+                        <button type="button" class="btn btn-primary ratingModalSaveButton disabled">${saveLabel}</button>
+                    </div>
+                </div>
+            </div>
+        `;
+
+        this.element.innerHTML = modalHTML;
+        this.modal = new bootstrap.Modal(this.element);
+        
+        // Add backdrop cleanup
+        this.element.addEventListener('hidden.bs.modal', () => {
+            document.querySelectorAll('.modal-backdrop').forEach(backdrop => backdrop.remove());
+            document.body.classList.remove('modal-open');
+        });
+    }
+
+    createStarRating() {
+        return `
+            <div class="star-rating" data-rating="0">
+                ${Array.from({length: 5}, (_, i) => 
+                    `<span class="star" data-value="${i + 1}">★</span>`
+                ).join('')}
+            </div>
+            <style>
+                .star-rating { font-size: 2em; cursor: pointer; }
+                .star { color: #ddd; transition: color 0.2s; }
+                .star.active { color: #ffc107; }
+                .star:hover, .star.hover { color: #ffc107; }
+            </style>
+        `;
+    }
+
+    bindEvents() {
+        // Star rating events
+        const stars = this.element.querySelectorAll('.star');
+        const saveButton = this.element.querySelector('.ratingModalSaveButton');
+
+        stars.forEach((star, index) => {
+            star.addEventListener('mouseenter', () => this.highlightStars(index + 1));
+            star.addEventListener('mouseleave', () => this.highlightStars(this.ratingValue));
+            star.addEventListener('click', () => {
+                this.ratingValue = index + 1;
+                this.highlightStars(this.ratingValue);
+                saveButton.classList.remove('disabled');
+            });
+        });
+
+        // Save button event
+        saveButton.addEventListener('click', () => this.saveRating());
+
+        // Modal show event
+        this.element.addEventListener('show.bs.modal', () => this.loadCurrentRating());
+    }
+
+    highlightStars(rating) {
+        const stars = this.element.querySelectorAll('.star');
+        stars.forEach((star, index) => {
+            star.classList.toggle('active', index < rating);
+        });
+    }
+
+    loadCurrentRating() {
+        const saveButton = this.element.querySelector('.ratingModalSaveButton');
+        const instructEl = this.element.querySelector('.ratingModalInstruct');
+        const that = this;
+
+        saveButton.classList.add('disabled');
+
+        up.jQuery.ajax({
+            url: this.element.dataset.geturl,
+            success: function(data) {
+                if (data.rating === null) {
+                    that.ratingValue = 0;
+                    that.highlightStars(0);
+                    instructEl.textContent = that.element.dataset['rating.instructions.unrated'] || '';
+                } else {
+                    that.ratingValue = data.rating;
+                    that.highlightStars(data.rating);
+                    saveButton.classList.remove('disabled');
+                    instructEl.textContent = that.element.dataset['rating.instructions.rated'] || '';
+                }
+
+                // Center modal dialog
+                const dialog = that.element.querySelector('.modal-dialog');
+                dialog.style.transform = 'translate(0, 50%)';
+            },
+            error: function() {
+                ModernNotification.show(
+                    that.element.dataset['get.rating.unsucessful'] || 'Error loading rating',
+                    'TopCenter',
+                    'error'
+                );
+            }
+        });
+    }
+
+    saveRating() {
+        if (this.ratingValue === 0) return;
+
+        const that = this;
+        up.jQuery.ajax({
+            url: this.element.dataset.saveurl,
+            data: { rating: this.ratingValue },
+            type: 'POST',
+            success: function() {
+                that.modal.hide();
+                ModernNotification.show(
+                    that.element.dataset['rating.save.successful'] || 'Rating saved successfully',
+                    'TopCenter',
+                    'success'
+                );
+                setTimeout(() => {
+                    const instructEl = that.element.querySelector('.ratingModalInstruct');
+                    if (instructEl) {
+                        instructEl.textContent = that.element.dataset['rating.instructions.rated'] || '';
+                    }
+                }, 1000);
+            },
+            error: function() {
+                that.modal.hide();
+                ModernNotification.show(
+                    that.element.dataset['rating.save.unsuccessful'] || 'Error saving rating',
+                    'TopCenter',
+                    'error'
+                );
+            }
+        });
+    }
+
+    show() {
+        this.modal.show();
+    }
+
+    hide() {
+        this.modal.hide();
+    }
+}
+
+// Simple notification system (replaces noty dependency)
+class ModernNotification {
+    static show(message, position = 'TopCenter', type = 'info') {
+        const notification = document.createElement('div');
+        notification.className = `modern-notification notification-${type}`;
+        notification.textContent = message;
+        
+        // Position styles
+        const positions = {
+            'TopCenter': { top: '20px', left: '50%', transform: 'translateX(-50%)' },
+            'TopRight': { top: '20px', right: '20px' },
+            'TopLeft': { top: '20px', left: '20px' }
+        };
+        
+        Object.assign(notification.style, {
+            position: 'fixed',
+            zIndex: '9999',
+            padding: '12px 20px',
+            borderRadius: '4px',
+            color: 'white',
+            fontWeight: 'bold',
+            maxWidth: '400px',
+            ...positions[position] || positions.TopCenter
+        });
+
+        // Type-specific styles
+        const typeColors = {
+            success: '#28a745',
+            error: '#dc3545',
+            info: '#17a2b8',
+            warning: '#ffc107'
+        };
+        
+        notification.style.backgroundColor = typeColors[type] || typeColors.info;
+        
+        document.body.appendChild(notification);
+        
+        // Auto-remove after delay
+        setTimeout(() => {
+            notification.style.opacity = '0';
+            notification.style.transition = 'opacity 0.3s';
+            setTimeout(() => notification.remove(), 300);
+        }, type === 'error' ? 5000 : 2000);
+    }
+}
+
+// Global functions for compatibility
+window.up = window.up || {};
+window.up.notify = ModernNotification.show;
+
+// jQuery plugin compatibility
+if (window.jQuery) {
+    window.jQuery.fn.createRatingModal = function() {
+        return this.each(function() {
+            if (!this.modernRatingModal) {
+                this.modernRatingModal = new ModernRatingModal(this);
+            }
+        });
+    };
+}
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-show-hide-toggle.js b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-show-hide-toggle.js
new file mode 100644
index 00000000000..8a5df446920
--- /dev/null
+++ b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-show-hide-toggle.js
@@ -0,0 +1,88 @@
+/*
+ * Licensed to Apereo under one or more contributor license
+ * agreements. See the NOTICE file distributed with this work
+ * for additional information regarding copyright ownership.
+ * Apereo licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file
+ * except in compliance with the License.  You may obtain a
+ * copy of the License at the following location:
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/**
+ * Modern replacement for up.showHideToggle
+ * Simple show/hide toggle functionality without Fluid dependencies
+ */
+class ModernShowHideToggle {
+    constructor(container, options = {}) {
+        this.container = typeof container === 'string' ? document.querySelector(container) : container;
+        this.options = {
+            showmessage: 'Show Stack Trace',
+            hidemessage: 'Hide Stack Trace',
+            selectors: {
+                stacktracediv: '.stacktrace',
+                stacktracetoggle: '.stacktracetoggle'
+            },
+            ...options
+        };
+        
+        this.init();
+    }
+    
+    init() {
+        this.stacktraceDiv = this.container.querySelector(this.options.selectors.stacktracediv);
+        this.toggleButton = this.container.querySelector(this.options.selectors.stacktracetoggle);
+        
+        if (!this.stacktraceDiv || !this.toggleButton) {
+            console.warn('ModernShowHideToggle: Required elements not found');
+            return;
+        }
+        
+        // Initially hide the stacktrace
+        this.stacktraceDiv.style.display = 'none';
+        this.isVisible = false;
+        
+        // Set initial button text
+        this.toggleButton.textContent = this.options.showmessage;
+        
+        // Bind click event
+        this.toggleButton.addEventListener('click', (e) => {
+            e.preventDefault();
+            this.toggle();
+        });
+    }
+    
+    toggle() {
+        if (this.isVisible) {
+            this.hide();
+        } else {
+            this.show();
+        }
+    }
+    
+    show() {
+        this.stacktraceDiv.style.display = 'block';
+        this.toggleButton.textContent = this.options.hidemessage;
+        this.isVisible = true;
+    }
+    
+    hide() {
+        this.stacktraceDiv.style.display = 'none';
+        this.toggleButton.textContent = this.options.showmessage;
+        this.isVisible = false;
+    }
+}
+
+// Global namespace compatibility
+window.up = window.up || {};
+window.up.showHideToggle = function(container, options) {
+    return new ModernShowHideToggle(container, options);
+};
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-tab-manager.js b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-tab-manager.js
new file mode 100644
index 00000000000..abc4ac3f9ed
--- /dev/null
+++ b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-tab-manager.js
@@ -0,0 +1,399 @@
+/*
+ * Modern replacement for Fluid-based TabManager component
+ * Replaces up-tab-manager.js with vanilla JavaScript implementation
+ */
+'use strict';
+
+class ModernTabManager {
+    constructor(container, options = {}) {
+        this.container = typeof container === 'string' ? document.querySelector(container) : container;
+        this.options = {
+            selectors: {
+                text: '.flc-inlineEdit-text',
+                edit: '.flc-inlineEditable', 
+                remove: '.portal-navigation-delete',
+                add: '.portal-navigation-add',
+                columns: '.flc-reorderer-column',
+                modules: '.movable,.up-fragment-admin',
+                lockedModules: '.locked:not(.up-fragment-admin)',
+                grabHandle: '.portal-navigation-gripper',
+                tabList: '#portalNavigationList',
+                tabListItems: '.portal-navigation',
+                tabGroup: '#activeTabGroup'
+            },
+            styles: {
+                lockedTab: 'locked',
+                singleTab: 'single', 
+                firstTab: 'first',
+                lastTab: 'last'
+            },
+            addTabLabel: 'My Tab',
+            addTabWidths: [50, 50],
+            insertBefore: 'insertBefore',
+            appendAfter: 'appendAfter',
+            tabContext: 'header',
+            numberOfPortlets: 0,
+            submitOnEnter: true,
+            ...options
+        };
+
+        this.events = {
+            onTabEdit: options.onTabEdit || (() => {}),
+            onTabRemove: options.onTabRemove || (() => {}),
+            onTabAdd: options.onTabAdd || (() => {}),
+            onTabMove: options.onTabMove || (() => {})
+        };
+
+        this.inlineEditor = null;
+        this.reorderLayout = null;
+        this.init();
+    }
+
+    init() {
+        this.initializeInlineEdit();
+        this.initializeRemoveHandler();
+        this.initializeAddHandler();
+        this.initializeTabReordering();
+    }
+
+    initializeInlineEdit() {
+        const editElement = this.container.querySelector(this.options.selectors.edit);
+        const textElement = this.container.querySelector(this.options.selectors.text);
+        
+        if (!editElement || !textElement) return;
+
+        // Modern inline editing without Fluid dependency
+        this.setupModernInlineEdit(editElement, textElement);
+
+        // Add hover effects for text editing (only for span elements)
+        if (textElement.tagName === 'SPAN') {
+            textElement.addEventListener('mouseenter', () => {
+                textElement.style.cursor = 'text';
+                textElement.focus();
+            });
+
+            textElement.addEventListener('mouseleave', () => {
+                textElement.style.cursor = 'pointer';
+                textElement.blur();
+            });
+        }
+
+        // Auto-trigger edit mode for new tabs
+        const numberOfPortlets = parseInt(this.options.numberOfPortlets);
+        if (numberOfPortlets === 0 && textElement.textContent.trim() === this.options.addTabLabel) {
+            setTimeout(() => {
+                textElement.click();
+            }, 100);
+        }
+    }
+
+    hideEditControls() {
+        const removeEl = this.container.querySelector(this.options.selectors.remove);
+        const gripperEl = this.container.querySelector(this.options.selectors.grabHandle);
+        const editEl = this.container.querySelector(this.options.selectors.edit);
+        
+        if (removeEl) removeEl.style.display = 'none';
+        if (gripperEl) gripperEl.style.display = 'none';
+        if (editEl) editEl.style.display = 'none';
+    }
+
+    showEditControls() {
+        const removeEl = this.container.querySelector(this.options.selectors.remove);
+        const gripperEl = this.container.querySelector(this.options.selectors.grabHandle);
+        const editEl = this.container.querySelector(this.options.selectors.edit);
+        
+        if (removeEl) removeEl.style.display = '';
+        if (gripperEl && gripperEl.classList.contains('active')) gripperEl.style.display = '';
+        if (editEl) editEl.style.display = '';
+    }
+
+    initializeRemoveHandler() {
+        const removeElement = this.container.querySelector(this.options.selectors.remove);
+        if (removeElement) {
+            removeElement.addEventListener('click', (e) => {
+                e.preventDefault();
+                // Find the tab container (li element) that contains this delete button
+                const tabElement = e.target.closest('.portal-navigation');
+                this.events.onTabRemove(tabElement);
+            });
+        }
+    }
+
+    initializeAddHandler() {
+        // Look for add button in the navigation list, not just within this container
+        const addElement = document.querySelector(this.options.selectors.add);
+        if (addElement) {
+            const tabGroupElement = this.container.querySelector(this.options.selectors.tabGroup);
+            const tabGroup = tabGroupElement ? tabGroupElement.textContent.trim() : '';
+            
+            addElement.addEventListener('click', (e) => {
+                e.preventDefault();
+                this.events.onTabAdd(
+                    this.options.addTabLabel,
+                    this.options.addTabWidths,
+                    tabGroup
+                );
+            });
+        }
+    }
+
+    initializeTabReordering() {
+        this.manageLockedTabs();
+        this.setupReorderLayout();
+    }
+
+    manageLockedTabs() {
+        const tabList = this.container.querySelector(this.options.selectors.tabList);
+        if (!tabList) return;
+
+        const lockedTabs = tabList.querySelectorAll(this.options.selectors.lockedModules);
+        const lastLockedTab = lockedTabs[lockedTabs.length - 1];
+
+        if (lastLockedTab) {
+            // Hide grab handle on last locked tab
+            const grabHandle = lastLockedTab.querySelector(this.options.selectors.grabHandle);
+            if (grabHandle) grabHandle.style.display = 'none';
+
+            // Add locked class and hide grab handles on all previous tabs
+            let current = lastLockedTab.previousElementSibling;
+            while (current) {
+                current.classList.add(this.options.styles.lockedTab);
+                const handle = current.querySelector(this.options.selectors.grabHandle);
+                if (handle) handle.style.display = 'none';
+                current = current.previousElementSibling;
+            }
+        }
+    }
+
+    setupReorderLayout() {
+        // Modern drag and drop without Fluid dependency
+        this.setupModernDragDrop();
+    }
+
+    handleTabMove(item) {
+        const tab = item;
+        const tabShortId = window.up.defaultNodeIdExtractor(tab);
+        let method = this.options.insertBefore;
+        let targetTabShortId = null;
+        let tabPosition = 1;
+
+        const listItems = this.container.querySelectorAll(this.options.selectors.tabListItems);
+
+        // Determine method and target based on position
+        if (tab === tab.parentNode.lastElementChild) {
+            method = this.options.appendAfter;
+            const prevTab = tab.previousElementSibling;
+            if (prevTab && prevTab.id) {
+                targetTabShortId = prevTab.id.split('_')[1];
+            }
+        } else {
+            const nextTab = tab.nextElementSibling;
+            if (nextTab && nextTab.id) {
+                targetTabShortId = nextTab.id.split('_')[1];
+            }
+        }
+
+        // If we couldn't determine a valid target, don't proceed
+        if (!targetTabShortId) {
+            console.warn('TabManager: Invalid tab move - no valid target found');
+            return;
+        }
+
+        // Update tab positions and styles
+        listItems.forEach((li, index) => {
+            if (li.id === tab.id) {
+                tabPosition = index + 1;
+            }
+
+            // Apply appropriate styles based on position
+            li.classList.remove(
+                this.options.styles.singleTab,
+                this.options.styles.firstTab,
+                this.options.styles.lastTab
+            );
+
+            if (listItems.length === 1) {
+                li.classList.add(this.options.styles.singleTab);
+            } else if (index === 0) {
+                li.classList.add(this.options.styles.firstTab);
+            } else if (index === listItems.length - 1) {
+                li.classList.add(this.options.styles.lastTab);
+            }
+        });
+
+        // Fire tab move event
+        this.events.onTabMove(tabShortId, method, targetTabShortId, tabPosition);
+    }
+
+    locate(selector) {
+        const selectorPath = this.options.selectors[selector];
+        return selectorPath ? this.container.querySelector(selectorPath) : null;
+    }
+
+    setupModernInlineEdit(editElement, textElement) {
+        // Check if textElement is already an input (tab in edit mode)
+        if (textElement.tagName === 'INPUT') {
+            this.setupExistingInput(textElement, null);
+            return;
+        }
+        
+        let isEditing = false;
+        
+        textElement.addEventListener('click', (e) => {
+            // Prevent the parent link from navigating when clicking to edit
+            e.preventDefault();
+            e.stopPropagation();
+            
+            if (isEditing) return;
+            
+            isEditing = true;
+            
+            const originalText = textElement.textContent;
+            const input = document.createElement('input');
+            input.type = 'text';
+            input.value = originalText;
+            input.className = 'portal-navigation-label';
+            
+            // Size input to match text width
+            const textWidth = textElement.offsetWidth;
+            input.style.cssText = `display: inline-block; border: 1px solid #ccc; padding: 2px 4px; font-size: inherit; font-family: inherit; background: white; width: ${Math.max(textWidth, 60)}px;`;
+            
+            let isFinishing = false;
+            const finishEdit = () => {
+                if (isFinishing) return;
+                isFinishing = true;
+                
+                const newValue = input.value.trim();
+                textElement.textContent = newValue || originalText;
+                textElement.style.display = 'inline';
+                if (input.parentNode) {
+                    input.parentNode.removeChild(input);
+                }
+                isEditing = false;
+                
+                if (newValue && newValue !== originalText) {
+                    this.events.onTabEdit(newValue, originalText, editElement, textElement);
+                }
+            };
+            
+            input.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter') {
+                    e.preventDefault();
+                    finishEdit();
+                } else if (e.key === 'Escape') {
+                    input.value = originalText;
+                    finishEdit();
+                }
+            });
+            
+            input.addEventListener('blur', () => {
+                setTimeout(finishEdit, 100);
+            });
+            
+            // Replace the text element with the input
+            textElement.style.display = 'none';
+            textElement.parentNode.insertBefore(input, textElement.nextSibling);
+            input.focus();
+            input.select();
+        });
+    }
+    
+    setupExistingInput(input, textSpan) {
+        const originalText = input.value;
+        let isFinishing = false;
+        
+        input.style.cssText = `display: inline-block; border: 1px solid #ccc; padding: 2px 4px; font-size: inherit; font-family: inherit; background: white; width: ${Math.max(input.value.length * 8 + 20, 60)}px;`;
+        
+        const finishEdit = () => {
+            if (isFinishing) return;
+            isFinishing = true;
+            
+            const newValue = input.value.trim();
+            
+            // Convert input to span
+            const span = document.createElement('span');
+            span.className = 'portal-navigation-label flc-inlineEdit-text';
+            span.textContent = newValue || originalText;
+            
+            input.parentNode.replaceChild(span, input);
+            
+            // Re-initialize editing for the new span
+            this.setupModernInlineEdit(input.parentNode, span);
+            
+            if (newValue && newValue !== originalText) {
+                this.events.onTabEdit(newValue, originalText, input.parentNode, span);
+            }
+        };
+        
+        input.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                finishEdit();
+            } else if (e.key === 'Escape') {
+                input.value = originalText;
+                finishEdit();
+            }
+        });
+        
+        input.addEventListener('blur', () => {
+            setTimeout(finishEdit, 100);
+        });
+        
+        input.focus();
+        input.select();
+    }
+
+    setupModernDragDrop() {
+        const modules = this.container.querySelectorAll(this.options.selectors.modules);
+        
+        modules.forEach(module => {
+            if (module.classList.contains('locked')) return;
+            
+            module.draggable = true;
+            
+            module.addEventListener('dragstart', (e) => {
+                e.dataTransfer.setData('text/plain', module.id);
+                module.classList.add('dragging');
+            });
+            
+            module.addEventListener('dragend', () => {
+                module.classList.remove('dragging');
+            });
+            
+            module.addEventListener('dragover', (e) => {
+                e.preventDefault();
+            });
+            
+            module.addEventListener('drop', (e) => {
+                e.preventDefault();
+                const draggedId = e.dataTransfer.getData('text/plain');
+                const draggedModule = document.getElementById(draggedId);
+                
+                if (draggedModule && draggedModule !== module) {
+                    const parent = module.parentNode;
+                    const rect = module.getBoundingClientRect();
+                    const midpoint = rect.left + rect.width / 2;
+                    
+                    if (e.clientX < midpoint) {
+                        parent.insertBefore(draggedModule, module);
+                    } else {
+                        parent.insertBefore(draggedModule, module.nextSibling);
+                    }
+                    
+                    this.handleTabMove(draggedModule);
+                }
+            });
+        });
+    }
+
+    refresh() {
+        // Modern refresh without Fluid dependency
+        this.manageLockedTabs();
+    }
+}
+
+// Global initialization function to replace Fluid component
+window.up = window.up || {};
+window.up.TabManager = function(container, options) {
+    return new ModernTabManager(container, options);
+};
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-translator.js b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-translator.js
new file mode 100644
index 00000000000..14b58a2f9c7
--- /dev/null
+++ b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-translator.js
@@ -0,0 +1,338 @@
+/*
+ * Licensed to Apereo under one or more contributor license
+ * agreements. See the NOTICE file distributed with this work
+ * for additional information regarding copyright ownership.
+ * Apereo licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file
+ * except in compliance with the License.  You may obtain a
+ * copy of the License at the following location:
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/**
+ * Modern replacement for up.TranslatorPortlet
+ * Translation interface without Fluid dependencies
+ */
+class ModernTranslatorPortlet {
+    constructor(container, options = {}) {
+        this.container = typeof container === 'string' ? document.querySelector(container) : container;
+        this.options = {
+            namespace: 'uptrans',
+            locale: null,
+            entityType: null,
+            entity: null,
+            resourceUrl: '',
+            selectors: {
+                entityForm: '#uptrans-form',
+                locale: '#uptrans-locale',
+                entityType: '#uptrans-entityType',
+                entity: '.uptrans-entity',
+                entities: '#uptrans-entities',
+                entityList: '#uptrans-entityList',
+                portletForm: '#uptrans-portletForm',
+                messageForm: '#uptrans-messageForm',
+                formContainer: '#uptrans-formContainer',
+                addMessage: '#uptrans-addMessage'
+            },
+            messages: {
+                messageTranslationSaved: 'Message translation has been successfully saved',
+                portletTranslationSaved: 'Portlet definition translation has been successfully saved'
+            },
+            ...options
+        };
+        
+        this.init();
+    }
+    
+    init() {
+        this.bindElements();
+        this.bindEvents();
+        
+        // Initialize state
+        this.options.locale = this.localeSelect.value;
+        this.entityTypeSelectionChanged();
+    }
+    
+    bindElements() {
+        this.entityTypeSelect = this.container.querySelector(this.options.selectors.entityType);
+        this.localeSelect = this.container.querySelector(this.options.selectors.locale);
+        this.entitiesContainer = this.container.querySelector(this.options.selectors.entities);
+        this.entityList = this.container.querySelector(this.options.selectors.entityList);
+        this.portletForm = this.container.querySelector(this.options.selectors.portletForm);
+        this.messageForm = this.container.querySelector(this.options.selectors.messageForm);
+        this.formContainer = this.container.querySelector(this.options.selectors.formContainer);
+        this.addMessageBtn = this.container.querySelector(this.options.selectors.addMessage);
+    }
+    
+    bindEvents() {
+        this.entityTypeSelect.addEventListener('change', () => this.entityTypeSelectionChanged());
+        this.localeSelect.addEventListener('change', () => this.localeChanged());
+        this.portletForm.addEventListener('submit', (e) => this.submitPortletForm(e));
+        this.messageForm.addEventListener('submit', (e) => this.submitMessageForm(e));
+        this.addMessageBtn.addEventListener('click', () => this.addMessage());
+        
+        // Prevent entity form submission
+        const entityForm = this.container.querySelector(this.options.selectors.entityForm);
+        if (entityForm) {
+            entityForm.addEventListener('submit', (e) => {
+                e.preventDefault();
+                return false;
+            });
+        }
+    }
+    
+    async entityTypeSelectionChanged() {
+        const entityType = this.entityTypeSelect.value;
+        this.options.entityType = entityType;
+        this.options.entity = null;
+        
+        if (entityType) {
+            try {
+                const response = await fetch(this.options.resourceUrl, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+                    body: new URLSearchParams({
+                        entity: entityType,
+                        action: 'getEntityList'
+                    })
+                });
+                const data = await response.json();
+                this.refreshEntities(data);
+            } catch (error) {
+                console.error('Error loading entities:', error);
+            }
+        }
+    }
+    
+    refreshEntities(data) {
+        this.formContainer.style.display = 'none';
+        
+        if (this.options.entityType === 'message') {
+            this.addMessageBtn.style.display = 'block';
+        } else {
+            this.addMessageBtn.style.display = 'none';
+        }
+        
+        // Clear existing entities
+        this.entitiesContainer.innerHTML = '';
+        
+        // Sort entities by title using original sorting function
+        const sortedEntities = data.entities.sort(up.getStringPropertySortFunction('title'));
+        
+        // Create entity buttons with keyboard support
+        sortedEntities.forEach(entity => {
+            const button = document.createElement('button');
+            button.className = 'btn btn-secondary uptrans-entity';
+            button.textContent = entity.title;
+            button.setAttribute('tabindex', '0');
+            
+            // Click handler
+            const selectEntity = () => {
+                this.options.entity = entity;
+                this.updateForm();
+            };
+            
+            button.addEventListener('click', selectEntity);
+            
+            // Keyboard handler (Enter key)
+            button.addEventListener('keydown', (e) => {
+                if (e.keyCode === 13) { // Enter key
+                    selectEntity();
+                }
+            });
+            
+            this.entitiesContainer.appendChild(button);
+        });
+    }
+    
+    localeChanged() {
+        this.options.locale = this.localeSelect.value;
+        this.updateForm();
+    }
+    
+    updateForm() {
+        if (this.options.entity) {
+            if (this.options.entityType === 'portlet') {
+                this.fillPortletForm();
+            } else if (this.options.entityType === 'message') {
+                this.fillMessageForm();
+            }
+        }
+    }
+    
+    async fillPortletForm() {
+        try {
+            const response = await fetch(this.options.resourceUrl, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+                body: new URLSearchParams({
+                    action: 'getEntity',
+                    id: this.options.entity.id,
+                    locale: this.options.locale,
+                    entity: this.options.entityType
+                })
+            });
+            const data = await response.json();
+            const portlet = data.portlet;
+            
+            // Fill form fields
+            this.setFormValue('.uptrans-pfrm-id', portlet.id);
+            this.setFormValue('.uptrans-pfrm-loc', portlet.locale);
+            this.setFormValue('.uptrans-pfrm-orig-title', portlet.original.title);
+            this.setFormValue('.uptrans-pfrm-loc-title', portlet.localized.title);
+            this.setFormValue('.uptrans-pfrm-orig-name', portlet.original.name);
+            this.setFormValue('.uptrans-pfrm-loc-name', portlet.localized.name);
+            this.setFormValue('.uptrans-pfrm-orig-descr', portlet.original.description);
+            this.setFormValue('.uptrans-pfrm-loc-descr', portlet.localized.description);
+            
+            this.messageForm.style.display = 'none';
+            this.formContainer.style.display = 'block';
+            this.portletForm.style.display = 'block';
+        } catch (error) {
+            console.error('Error loading portlet data:', error);
+        }
+    }
+    
+    async fillMessageForm() {
+        try {
+            const response = await fetch(this.options.resourceUrl, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+                body: new URLSearchParams({
+                    action: 'getEntity',
+                    id: this.options.entity.id,
+                    locale: this.options.locale,
+                    entity: this.options.entityType
+                })
+            });
+            const data = await response.json();
+            let message = data.message;
+            
+            // If no message, initialize with empty values
+            if (!message) {
+                message = {
+                    code: this.options.entity.id,
+                    locale: this.options.locale,
+                    value: ''
+                };
+            }
+            
+            // Fill form fields
+            this.setFormValue('.uptrans-mfrm-code', message.code);
+            this.setFormValue('.uptrans-mfrm-loc', message.locale);
+            this.setFormValue('.uptrans-mfrm-value', message.value);
+            
+            this.portletForm.style.display = 'none';
+            this.formContainer.style.display = 'block';
+            this.messageForm.style.display = 'block';
+            this.messageForm.querySelector('.uptrans-mfrm-code-fieldset').style.display = 'none';
+        } catch (error) {
+            console.error('Error loading message data:', error);
+        }
+    }
+    
+    addMessage() {
+        this.options.entity = null;
+        
+        // Fill form with empty values for new message
+        this.setFormValue('.uptrans-mfrm-code', '');
+        this.setFormValue('.uptrans-mfrm-loc', this.options.locale);
+        this.setFormValue('.uptrans-mfrm-value', '');
+        
+        this.messageForm.querySelector('.uptrans-mfrm-code-fieldset').style.display = 'block';
+        this.portletForm.style.display = 'none';
+        this.formContainer.style.display = 'block';
+        this.messageForm.style.display = 'block';
+    }
+    
+    async submitPortletForm(e) {
+        e.preventDefault();
+        
+        try {
+            const formData = new FormData(this.portletForm);
+            const response = await fetch(this.portletForm.action, {
+                method: 'POST',
+                body: formData
+            });
+            
+            if (response.ok) {
+                this.showSuccessMessage(this.options.messages.portletTranslationSaved);
+            }
+        } catch (error) {
+            console.error('Error submitting portlet form:', error);
+        }
+        
+        return false;
+    }
+    
+    async submitMessageForm(e) {
+        e.preventDefault();
+        
+        try {
+            const formData = new FormData(this.messageForm);
+            const response = await fetch(this.messageForm.action, {
+                method: 'POST',
+                body: formData
+            });
+            
+            if (response.ok) {
+                // If this was a new message (entity was null), reload entity list
+                if (this.options.entity === null) {
+                    await this.entityTypeSelectionChanged();
+                }
+                this.showSuccessMessage(this.options.messages.messageTranslationSaved);
+            }
+        } catch (error) {
+            console.error('Error submitting message form:', error);
+        }
+        
+        return false;
+    }
+    
+    setFormValue(selector, value) {
+        const element = this.container.querySelector(selector);
+        if (element) {
+            if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {
+                element.value = value || '';
+            } else {
+                element.textContent = value || '';
+            }
+        }
+    }
+    
+    showSuccessMessage(message) {
+        const messageEl = this.formContainer.querySelector('.portlet-msg-success');
+        if (messageEl) {
+            messageEl.innerHTML = message; // Use innerHTML like original
+            messageEl.style.display = 'block';
+            
+            // Fade out after 4 seconds like original
+            setTimeout(() => {
+                let opacity = 1;
+                const fadeOut = setInterval(() => {
+                    opacity -= 0.1;
+                    messageEl.style.opacity = opacity;
+                    if (opacity <= 0) {
+                        clearInterval(fadeOut);
+                        messageEl.style.display = 'none';
+                        messageEl.style.opacity = 1; // Reset for next time
+                    }
+                }, 100);
+            }, 4000);
+        }
+    }
+}
+
+// Global namespace compatibility
+window.up = window.up || {};
+window.up.TranslatorPortlet = function(container, options) {
+    return new ModernTranslatorPortlet(container, options);
+};
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-uploader.js b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-uploader.js
new file mode 100644
index 00000000000..40186d522bc
--- /dev/null
+++ b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-uploader.js
@@ -0,0 +1,225 @@
+/*
+ * Licensed to Apereo under one or more contributor license
+ * agreements. See the NOTICE file distributed with this work
+ * for additional information regarding copyright ownership.
+ * Apereo licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file
+ * except in compliance with the License.  You may obtain a
+ * copy of the License at the following location:
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+'use strict';
+var up = up || {};
+
+/**
+ * Modern file uploader - no Fluid dependencies
+ */
+class ModernUploader {
+    constructor(container, options = {}) {
+        this.container = typeof container === 'string' ? document.querySelector(container) : container;
+        this.options = {
+            queueSettings: {
+                uploadURL: '/api/import',
+                fileQueueLimit: 1
+            },
+            ...options
+        };
+        
+        this.files = [];
+        this.init();
+    }
+
+    init() {
+        this.setupFileInput();
+        this.setupQueue();
+        this.setupButtons();
+    }
+
+    setupFileInput() {
+        // Create hidden file input
+        this.fileInput = document.createElement('input');
+        this.fileInput.type = 'file';
+        this.fileInput.multiple = this.options.queueSettings.fileQueueLimit > 1;
+        this.fileInput.style.display = 'none';
+        this.container.appendChild(this.fileInput);
+
+        // Setup browse button
+        const browseBtn = this.container.querySelector('.uploader-button-browse');
+        if (browseBtn) {
+            browseBtn.innerHTML = '<button type="button" class="btn btn-primary">Browse Files</button>';
+            browseBtn.addEventListener('click', () => this.fileInput.click());
+        }
+
+        this.fileInput.addEventListener('change', (e) => this.handleFileSelect(e));
+    }
+
+    setupQueue() {
+        this.queueTable = this.container.querySelector('.uploader-queue tbody');
+        this.template = this.container.querySelector('.uploader-file-template');
+        this.errorTemplate = this.container.querySelector('.uploader-file-error-template');
+        this.totalProgress = this.container.querySelector('.uploader-total-progress-text p');
+    }
+
+    setupButtons() {
+        this.uploadBtn = this.container.querySelector('.uploader-button-upload');
+        this.pauseBtn = this.container.querySelector('.uploader-button-pause');
+
+        if (this.uploadBtn) {
+            this.uploadBtn.addEventListener('click', (e) => {
+                e.preventDefault();
+                this.uploadFiles();
+            });
+        }
+    }
+
+    handleFileSelect(event) {
+        const files = Array.from(event.target.files);
+        
+        // Clear existing files if limit is 1
+        if (this.options.queueSettings.fileQueueLimit === 1) {
+            this.clearQueue();
+        }
+
+        files.forEach(file => this.addFile(file));
+        this.updateUI();
+    }
+
+    addFile(file) {
+        if (this.files.length >= this.options.queueSettings.fileQueueLimit) {
+            return;
+        }
+
+        const fileObj = {
+            id: Date.now() + Math.random(),
+            file: file,
+            name: file.name,
+            size: file.size,
+            status: 'queued'
+        };
+
+        this.files.push(fileObj);
+        this.renderFileRow(fileObj);
+    }
+
+    renderFileRow(fileObj) {
+        const row = this.template.cloneNode(true);
+        row.classList.remove('uploader-file-template', 'd-none');
+        row.setAttribute('data-file-id', fileObj.id);
+
+        const nameCell = row.querySelector('.uploader-file-name');
+        const sizeCell = row.querySelector('.uploader-file-size');
+        const actionBtn = row.querySelector('.uploader-file-action');
+
+        if (nameCell) nameCell.textContent = fileObj.name;
+        if (sizeCell) sizeCell.textContent = this.formatFileSize(fileObj.size);
+        
+        if (actionBtn) {
+            actionBtn.addEventListener('click', () => this.removeFile(fileObj.id));
+        }
+
+        this.queueTable.appendChild(row);
+    }
+
+    removeFile(fileId) {
+        this.files = this.files.filter(f => f.id !== fileId);
+        const row = this.container.querySelector(`[data-file-id="${fileId}"]`);
+        if (row) row.remove();
+        this.updateUI();
+    }
+
+    clearQueue() {
+        this.files = [];
+        const rows = this.queueTable.querySelectorAll('tr:not(.uploader-file-template):not(.uploader-file-error-template)');
+        rows.forEach(row => row.remove());
+        this.updateUI();
+    }
+
+    async uploadFiles() {
+        if (this.files.length === 0) return;
+
+        this.uploadBtn.disabled = true;
+        this.pauseBtn.classList.remove('d-none');
+
+        for (const fileObj of this.files) {
+            if (fileObj.status === 'queued') {
+                await this.uploadFile(fileObj);
+            }
+        }
+
+        this.uploadBtn.disabled = false;
+        this.pauseBtn.classList.add('d-none');
+    }
+
+    async uploadFile(fileObj) {
+        const formData = new FormData();
+        formData.append('file', fileObj.file);
+
+        try {
+            fileObj.status = 'uploading';
+            
+            const response = await fetch(this.options.queueSettings.uploadURL, {
+                method: 'POST',
+                body: formData
+            });
+
+            if (response.ok) {
+                fileObj.status = 'complete';
+                // Redirect or show success message
+                window.location.reload();
+            } else {
+                throw new Error(`Upload failed: ${response.statusText}`);
+            }
+        } catch (error) {
+            fileObj.status = 'error';
+            this.showError(fileObj, error.message);
+        }
+    }
+
+    showError(fileObj, message) {
+        const errorRow = this.errorTemplate.cloneNode(true);
+        errorRow.classList.remove('uploader-file-error-template', 'd-none');
+        
+        const errorCell = errorRow.querySelector('.uploader-file-error');
+        if (errorCell) {
+            errorCell.textContent = `Error uploading ${fileObj.name}: ${message}`;
+        }
+
+        const fileRow = this.container.querySelector(`[data-file-id="${fileObj.id}"]`);
+        if (fileRow) {
+            fileRow.parentNode.insertBefore(errorRow, fileRow.nextSibling);
+        }
+    }
+
+    updateUI() {
+        const totalSize = this.files.reduce((sum, f) => sum + f.size, 0);
+        if (this.totalProgress) {
+            this.totalProgress.textContent = `Total: ${this.files.length} files (${this.formatFileSize(totalSize)})`;
+        }
+
+        if (this.uploadBtn) {
+            this.uploadBtn.disabled = this.files.length === 0;
+            this.uploadBtn.classList.toggle('opacity-50', this.files.length === 0);
+        }
+    }
+
+    formatFileSize(bytes) {
+        if (bytes === 0) return '0 B';
+        const k = 1024;
+        const sizes = ['B', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+    }
+}
+
+// Direct modern uploader - no Fluid compatibility needed
+up.uploader = function(container, options) {
+    return new ModernUploader(container, options);
+};
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/rs/conflict-resolution/js/resolve-conflicts.js b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-url-provider.js
similarity index 54%
rename from uPortal-webapp/src/main/webapp/rs/conflict-resolution/js/resolve-conflicts.js
rename to uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-url-provider.js
index 37214451252..34a7f5def7b 100644
--- a/uPortal-webapp/src/main/webapp/rs/conflict-resolution/js/resolve-conflicts.js
+++ b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-url-provider.js
@@ -17,7 +17,34 @@
  * under the License.
  */
 'use strict';
+var up = up || {};
 
-// Namespace conflict with fluid and bootstrap, leveraging fluid function as default
-var bootstrapTooltip = $.fn.tooltip.noConflict(); // return $.fn.tooltip to previously assigned value
-$.fn.bootstrapTooltip = bootstrapTooltip; // give $().bootstrapTooltip the Bootstrap functionality
+/**
+ * Modern URL provider - no Fluid dependencies
+ */
+class ModernUrlProvider {
+    constructor(container, options = {}) {
+        this.container = container;
+        this.options = {
+            portalContext: '/uPortal',
+            ...options
+        };
+    }
+
+    getPortletUrl(fname) {
+        return this.options.portalContext + '/p/' + fname;
+    }
+
+    getTabUrl(tabId) {
+        return this.options.portalContext + '/f/' + tabId;
+    }
+
+    getPortalHomeUrl() {
+        return this.options.portalContext + '/';
+    }
+}
+
+// Maintain backward compatibility
+up.UrlProvider = function(container, options) {
+    return new ModernUrlProvider(container, options);
+};
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-util.js b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-util.js
new file mode 100644
index 00000000000..6128de74f65
--- /dev/null
+++ b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/modern-util.js
@@ -0,0 +1,89 @@
+/*
+ * Licensed to Apereo under one or more contributor license
+ * agreements. See the NOTICE file distributed with this work
+ * for additional information regarding copyright ownership.
+ * Apereo licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file
+ * except in compliance with the License.  You may obtain a
+ * copy of the License at the following location:
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+'use strict';
+var up = up || {};
+
+/**
+ * Modern utility methods for uPortal - no Fluid dependencies
+ */
+(function ($) {
+    /**
+     * Extracts a uPortal DLM element ID from an HTML node.
+     */
+    up.defaultNodeIdExtractor = function (element) {
+        return $(element).attr('id').split('_')[1];
+    };
+
+    /**
+     * Returns a sort function for case-insensitive string property comparison
+     */
+    up.getStringPropertySortFunction = function (propertyName, firstValue) {
+        return function (a, b) {
+            const aprop = a[propertyName].toLowerCase();
+            const bprop = b[propertyName].toLowerCase();
+
+            if (aprop === bprop) return 0;
+
+            if (firstValue) {
+                const first = firstValue.toLowerCase();
+                if (aprop === first) return -1;
+                if (bprop === first) return 1;
+            }
+
+            return aprop > bprop ? 1 : -1;
+        };
+    };
+
+    /**
+     * Escape special characters for RegExp
+     */
+    up.escapeSpecialChars = function (string_) {
+        const specials = /[.*+?|()[\]{}\\]/g;
+        return string_.replace(specials, '\\$&');
+    };
+
+    /**
+     * Shows a loading screen
+     */
+    up.showLoader = function (selector) {
+        selector.show();
+    };
+
+    /**
+     * Hides a loading screen after delay
+     */
+    up.hideLoader = function (selector, time) {
+        const duration = time === undefined ? 1000 : time;
+        setTimeout(() => {
+            selector.fadeOut('slow');
+        }, duration);
+    };
+
+    /**
+     * Format message with placeholder replacement
+     */
+    up.formatMessage = function (message, arguments_) {
+        let s = message;
+        for (let index = 0; index < arguments_.length; index++) {
+            const reg = new RegExp('\\{' + index + '\\}', 'gm');
+            s = s.replace(reg, arguments_[index]);
+        }
+        return s;
+    };
+})(jQuery);
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/prevent-component-reload.js b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/prevent-component-reload.js
new file mode 100644
index 00000000000..adf50549689
--- /dev/null
+++ b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/prevent-component-reload.js
@@ -0,0 +1 @@
+// Navigation detection script - intentionally empty (debug instrumentation removed)
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-autocomplete.js b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-autocomplete.js
deleted file mode 100644
index 490016cfea2..00000000000
--- a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-autocomplete.js
+++ /dev/null
@@ -1,140 +0,0 @@
-/*
- * Licensed to Apereo under one or more contributor license
- * agreements. See the NOTICE file distributed with this work
- * for additional information regarding copyright ownership.
- * Apereo licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file
- * except in compliance with the License.  You may obtain a
- * copy of the License at the following location:
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-'use strict';
-var up = up || {};
-
-(function ($, fluid) {
-    up.Autocomplete = function (container, options) {
-        var that = fluid.initView('up.Autocomplete', container, options);
-        that.state = that.state || {};
-
-        var cutpoints = [
-            {id: 'match:', selector: that.options.selectors.match},
-            {id: 'matchLink', selector: that.options.selectors.matchLink},
-            {id: 'matchText', selector: that.options.selectors.matchText},
-        ];
-
-        that.search = function () {
-            that.locate('input').removeClass('up-autocomplete-validinput');
-            that.locate('dropdown').show();
-
-            var results = that.options.searchFunction(
-                that.locate('input').val()
-            );
-
-            var tree = {children: []};
-            $(results).each(function (index, result) {
-                tree.children.push({
-                    ID: 'match:',
-                    children: [
-                        {
-                            ID: 'matchLink',
-                            decorators: [
-                                {
-                                    type: 'jQuery',
-                                    func: 'click',
-                                    args: function () {
-                                        that.locate('input').val(result.text);
-                                        that.state.currentValue = result.value;
-                                        that.locate('dropdown').hide();
-                                        that.locate('input').addClass(
-                                            'up-autocomplete-validinput'
-                                        );
-                                    },
-                                },
-                            ],
-                        },
-                        {ID: 'matchText', value: result.text},
-                    ],
-                });
-            });
-
-            if (that.state.templates) {
-                fluid.reRender(
-                    that.state.templates,
-                    that.locate('matches'),
-                    tree,
-                    {
-                        cutpoints: cutpoints,
-                    }
-                );
-            } else {
-                that.state.templates = fluid.selfRender(
-                    that.locate('matches'),
-                    tree,
-                    {
-                        cutpoints: cutpoints,
-                    }
-                );
-            }
-            that.locate('loadingMessage').hide();
-        };
-
-        that.getValue = function () {
-            return that.state.currentValue;
-        };
-
-        that.locate('close').click(function () {
-            that.locate('dropdown').hide();
-        });
-        that.locate('input').keyup(that.search);
-
-        // remove the initial instructional text when the input is focused
-        that.locate('input').focus(function () {
-            var text = that.locate('input').val();
-            if (text == that.options.initialText) {
-                that.locate('input').val('');
-            }
-        });
-
-        // replace the initial instruction text if no option is selected
-        that.locate('input').blur(function () {
-            var text = that.locate('input').val();
-            if (text == '') {
-                that.locate('input').val(that.options.initialText);
-            }
-        });
-
-        return that;
-    };
-
-    fluid.defaults('up.Autocomplete', {
-        initialText: '',
-        searchFunction: null,
-        selectors: {
-            input: '.up-autocomplete-searchterm',
-            dropdown: '.up-autocomplete-dropdown',
-            close: '.up-autocomplete-close',
-            noResultsMessage: '.up-autocomplete-noresults',
-            matches: '.up-autocomplete-matches',
-            match: '.up-autocomplete-match',
-            matchLink: '.up-autocomplete-match-link',
-            matchText: '.up-autocomplete-match-text',
-            loadingMessage: '.up-autocomplete-loading',
-        },
-        events: {
-            onSearch: null,
-            onClose: null,
-        },
-        listeners: {
-            onSearch: null,
-            onClose: null,
-        },
-    });
-})(jQuery, fluid);
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-config-lightbox.js b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-config-lightbox.js
deleted file mode 100644
index 67d7a7cbe28..00000000000
--- a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-config-lightbox.js
+++ /dev/null
@@ -1,198 +0,0 @@
-/*
- * Licensed to Apereo under one or more contributor license
- * agreements. See the NOTICE file distributed with this work
- * for additional information regarding copyright ownership.
- * Apereo licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file
- * except in compliance with the License.  You may obtain a
- * copy of the License at the following location:
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-var up = up || {};
-
-up.lightboxConfig =
-    up.lightboxConfig ||
-    (function (window, $) {
-        'use strict';
-
-        var init;
-        var defaultOptions;
-        var processAjaxResponse;
-        var convertExclusiveUrlToPageUrl;
-
-        /**
-         * Since the portlet config mode is loaded with the exclusive state, need
-         * to rewrite all the URLS with a more natural state or when the action
-         * occurs, you lose all the portal-y stuff (headers, other portlets, etc...)
-         *
-         * This tries to be kinda smart about it, but is somewhat limited in what
-         * we can do.  If the portlet being editing is maximized, it will try to
-         * retain that.  Otherwise, it will switch back the normal state.
-         *
-         * @param url the url to update
-         * @return the updated URL as a string.
-         */
-        convertExclusiveUrlToPageUrl = function (url) {
-            var newUrl;
-            var matches;
-            var currentPagePortletId;
-            var portletId;
-            var state;
-
-            matches = /\/p\/([^/]+)\//.exec(window.location.pathname);
-            if (matches && matches[1]) {
-                currentPagePortletId = matches[1];
-            }
-
-            matches = /\/p\/([^/]+)\//.exec(url);
-            if (matches && matches[1]) {
-                portletId = matches[1];
-            }
-
-            state = 'normal';
-            // if editing a normal portlet, Try to retain the state.  If editing a
-            // portlet in a region, have to switch back to normal mode.  This is
-            // not ideal, but it's very similar to what the happens now anyhow.
-            if (currentPagePortletId && portletId === currentPagePortletId) {
-                matches =
-                    /\/(normal|maximized|exclusive|detached)\/render.uP/.exec(
-                        window.location.pathname
-                    );
-                if (matches && matches[1]) {
-                    state = matches[1];
-                }
-            }
-
-            newUrl = url.replace('/exclusive/', '/' + state + '/');
-
-            return newUrl;
-        };
-
-        /**
-         * Grab the page source and rewrite all URLS in the response
-         * to fix the links to exclusive state.
-         *
-         * @param conf the lightbox configuration
-         * @param content the portlet content as a string.
-         */
-        processAjaxResponse = function (config, content) {
-            var temporaryHtml = $('<div/>').html(content);
-
-            // rewrite action URL on all forms...
-            $(temporaryHtml)
-                .find('form')
-                .each(function (index, form) {
-                    var action;
-                    var $form;
-
-                    $form = $(form);
-                    action = convertExclusiveUrlToPageUrl($form.attr('action'));
-                    $form.attr('action', action);
-                });
-
-            // rewrite href attr on all links.
-            $(temporaryHtml)
-                .find('a')
-                .each(function (index, a) {
-                    var href;
-                    var $a;
-
-                    $a = $(a);
-
-                    href = convertExclusiveUrlToPageUrl($a.attr('href'));
-                    $a.attr('href', href);
-
-                    return href;
-                });
-
-            // once URLS are fixed, attach the content.
-            $(config.selectors.content).empty().append(temporaryHtml);
-        };
-
-        /**
-         * Overridable options that can be passed to init.
-         */
-        defaultOptions = {
-            selectors: {
-                editLinks: '[data-lightbox-url]',
-                lightbox: '#config-lightbox',
-                title: '#config-lightbox .modal-title',
-                loading: '#config-lightbox .loading',
-                content: '#config-lightbox .modal-body-content',
-            },
-            lightboxOptions: {
-                backdrop: 'static',
-                show: true,
-            },
-        };
-
-        /**
-         * Initialize the config lightbox support.
-         *
-         * @param config custom options (optional)
-         */
-        init = function (config) {
-            var config_;
-            var pageLoadedFunction;
-            var pageLoadErrorFunction;
-
-            config_ = $.extend(true, defaultOptions, config);
-
-            $(config_.selectors.editLinks).click(function (event_) {
-                var url;
-                var title;
-                var promise;
-
-                event_.preventDefault();
-                event_.stopPropagation();
-
-                url = $(event_.currentTarget).data('lightboxUrl');
-                title = $(event_.currentTarget).data('lightboxTitle');
-
-                pageLoadedFunction = function (content) {
-                    processAjaxResponse(config_, content);
-
-                    $(config_.selectors.loading).fadeOut();
-                    $(config_.selectors.content).fadeIn();
-                };
-
-                pageLoadErrorFunction = function () {
-                    // if the ajax call fails, revert to the classic, inline method
-                    // for handling configuration
-                    window.location.href = $(event_.currentTarget).attr('href');
-                };
-
-                if (title) {
-                    $(config_.selectors.title).text(title);
-                }
-
-                $(config_.selectors.content).hide();
-                $(config_.selectors.loading).show();
-                $(config_.selectors.lightbox).modal(config_.lightboxOptions);
-
-                promise = $.ajax({
-                    url: url,
-                    contentType: 'text/html',
-                });
-
-                promise.then(pageLoadedFunction, pageLoadErrorFunction);
-
-                return false;
-            });
-        };
-
-        /**
-         * Return the public API.
-         */
-        return {
-            init: init,
-        };
-    })(window, jQuery);
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-entity-registry.js b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-entity-registry.js
deleted file mode 100644
index 08db8ef7352..00000000000
--- a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-entity-registry.js
+++ /dev/null
@@ -1,105 +0,0 @@
-/*
- * Licensed to Apereo under one or more contributor license
- * agreements. See the NOTICE file distributed with this work
- * for additional information regarding copyright ownership.
- * Apereo licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file
- * except in compliance with the License.  You may obtain a
- * copy of the License at the following location:
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-'use strict';
-var up = up || {};
-
-(function ($, fluid) {
-    /**
-     * Instantiate a PortletRegistry component
-     *
-     * @param {Object} container Container the element containing the fragment browser
-     * @param {Object} options configuration options for the components
-     */
-    up.EntityRegistry = function (container, options) {
-        // construct the new component
-        var that = fluid.initView('up.EntityRegistry', container, options);
-
-        that.state = that.state || {};
-        that.state.entityCache = [];
-
-        // --------------------------------------------------
-        // PUBLIC METHODS
-        // --------------------------------------------------
-
-        that.searchEntities = function (entityTypes, searchTerm) {
-            var url;
-            var entities;
-            url = that.options.entitiesUrl + '.json';
-
-            $.ajax({
-                async: false,
-                url: url,
-                type: 'GET',
-                dataType: 'json',
-                data: {entityType: entityTypes, q: searchTerm},
-                success: function (json) {
-                    entities = json.jsonEntityBeanList;
-                },
-            });
-
-            return entities;
-        };
-
-        that.getEntity = function (entityType, entityId) {
-            var fullId;
-            var url;
-            var entity;
-
-            // first check to see if this entity is already in the local cache
-            fullId = entityType + ':' + entityId;
-            if (that.state.entityCache[fullId]) {
-                entity = that.state.entityCache[fullId];
-            }
-
-            // otherwise attempt to locate the entity on the server
-            url =
-                that.options.entitiesUrl +
-                '/' +
-                entityType +
-                '/' +
-                entityId +
-                '.json';
-            $.ajax({
-                async: false,
-                url: url,
-                type: 'GET',
-                dataType: 'json',
-                success: function (json) {
-                    that.state.entityCache[fullId] = json.jsonEntityBean;
-                    entity = json.jsonEntityBean;
-                },
-            });
-
-            return entity;
-        };
-
-        that.removeEntity = function (key) {
-            if (that.state.entityCache[key]) {
-                delete that.state.entityCache[key];
-            }
-        };
-
-        return that;
-    };
-
-    // defaults
-    fluid.defaults('up.EntityRegistry', {
-        entitiesUrl: '/uPortal/api/entities',
-    });
-})(jQuery, fluid);
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-favorite.js b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-favorite.js
deleted file mode 100644
index 0265e361e24..00000000000
--- a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-favorite.js
+++ /dev/null
@@ -1,150 +0,0 @@
-/*
- * Licensed to Apereo under one or more contributor license
- * agreements. See the NOTICE file distributed with this work
- * for additional information regarding copyright ownership.
- * Apereo licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file
- * except in compliance with the License.  You may obtain a
- * copy of the License at the following location:
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-var up = up || {};
-
-(function ($) {
-    up.addToFavorite = function addToFavoritesFunction(event) {
-        var portletId = event.data.portletId;
-        var context = event.data.context;
-        return $.ajax({
-            url:
-                context +
-                '/api/layout?action=addFavorite&channelId=' +
-                portletId,
-            type: 'POST',
-            data: null,
-            dataType: 'json',
-            async: true,
-            success: function (request) {
-                $('#up-notification').noty({
-                    text: request.response,
-                    type: 'success',
-                });
-            },
-            error: function (request) {
-                $('#up-notification').noty({
-                    text: request.responseJSON.response,
-                    type: 'error',
-                });
-            },
-        });
-    };
-
-    up.removeFromFavorite = function removeFromFavoritesFunction(event) {
-        var portletId = event.data.portletId;
-        var context = event.data.context;
-        return $.ajax({
-            url:
-                context +
-                '/api/layout?action=removeFavorite&channelId=' +
-                portletId,
-            type: 'POST',
-            data: null,
-            dataType: 'json',
-            async: true,
-            success: function (request) {
-                $('#up-notification').noty({
-                    text: request.response,
-                    type: 'success',
-                });
-            },
-            error: function (request) {
-                $('#up-notification').noty({
-                    text: request.response,
-                    type: 'error',
-                });
-            },
-        });
-    };
-
-    up.moveStuff = function moveStuffFunction(tabOrPortlet, item, context) {
-        var insertNode = function (sourceId, previousNodeId, nextNodeId) {
-            var saveOrderURL =
-                context +
-                '/api/layout?action=movePortletAjax' +
-                '&sourceId=' +
-                sourceId +
-                '&previousNodeId=' +
-                previousNodeId +
-                '&nextNodeId=' +
-                nextNodeId;
-            console.log(saveOrderURL);
-            $.ajax({
-                url: saveOrderURL,
-                type: 'POST',
-                data: null,
-                dataType: 'json',
-                async: true,
-                success: function () {
-                    console.log('layout move successful.');
-                },
-                error: function () {
-                    console.error('Error persisting move ' + saveOrderURL);
-                },
-            });
-        };
-
-        var moveFavoriteGroup = function (
-            sourceId,
-            previousNodeId,
-            nextNodeId
-        ) {
-            var method = '' === nextNodeId ? 'appendAfter' : 'insertBefore';
-            var elementId = '' === nextNodeId ? previousNodeId : nextNodeId;
-            var saveOrderURL =
-                context +
-                '/api/layout?action=moveTab' +
-                '&sourceID=' +
-                sourceId +
-                '&method=' +
-                method +
-                '&elementID=' +
-                elementId;
-            console.log(saveOrderURL);
-            $.ajax({
-                url: saveOrderURL,
-                type: 'POST',
-                data: null,
-                dataType: 'json',
-                async: true,
-                success: function () {
-                    console.log('favorite group move successful.');
-                },
-                error: function () {
-                    console.error(
-                        'Error persisting favorite group reorder ' +
-                            saveOrderURL
-                    );
-                },
-            });
-        };
-        var sourceID = $(item).attr('sourceid');
-        var nextId =
-            $(item).next().length > 0 ? $(item).next().attr('sourceid') : '';
-        var previousId =
-            $(item).prev().length > 0 ? $(item).prev().attr('sourceid') : '';
-
-        if ('Tab' === tabOrPortlet) {
-            moveFavoriteGroup(sourceID, previousId, nextId);
-        } else {
-            // We need to insert item both before and after
-            insertNode(sourceID, previousId, nextId);
-        }
-    };
-})(jQuery);
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-fragment-permissions-manager.js b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-fragment-permissions-manager.js
deleted file mode 100644
index e5200532a1e..00000000000
--- a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-fragment-permissions-manager.js
+++ /dev/null
@@ -1,353 +0,0 @@
-/*
- * Licensed to Apereo under one or more contributor license
- * agreements. See the NOTICE file distributed with this work
- * for additional information regarding copyright ownership.
- * Apereo licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file
- * except in compliance with the License.  You may obtain a
- * copy of the License at the following location:
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-var up = up || {};
-
-(function ($, fluid) {
-    /**
-     * Populate a permissions form according to the presence or absence of
-     * CSS classes on the specified element.
-     *
-     * @param that      layout manager instance
-     * @param element   HTML element with permission CSS classes
-     */
-    var populateForm = function (that, element) {
-        // set the hidden portlet ID attribute
-        var form = that.locate('permissionsDialog').find('form');
-        form.find('[name=nodeId]').val(that.options.nodeIdExtractor(element));
-
-        // set the movable permission
-        if (element.hasClass(that.options.cssClassNames.movable)) {
-            form.find('[name=movable]').attr('checked', 'checked');
-        } else {
-            form.find('[name=movable]').removeAttr('checked');
-        }
-
-        // set the deletable permission
-        if (element.hasClass(that.options.cssClassNames.deletable)) {
-            form.find('[name=deletable]').attr('checked', 'checked');
-        } else {
-            form.find('[name=deletable]').removeAttr('checked');
-        }
-
-        // set the movable permission
-        if (element.hasClass(that.options.cssClassNames.editable)) {
-            form.find('[name=editable]').attr('checked', 'checked');
-        } else {
-            form.find('[name=editable]').removeAttr('checked');
-        }
-
-        // set the movable permission
-        if (element.hasClass(that.options.cssClassNames.addChildAllowed)) {
-            form.find('[name=addChildAllowed]').attr('checked', 'checked');
-        } else {
-            form.find('[name=addChildAllowed]').removeAttr('checked');
-        }
-
-        var title = that.options.titleExtractor(element);
-        that.locate('formTitle').html(title);
-    };
-
-    /**
-     * Update the persisted permissions for a portal page according to the
-     * selections in the submitted form.
-     *
-     * @param that      layout manager instance
-     * @param form      permissions form
-     * @return
-     */
-    var updatePermissions = function (that, element) {
-        var newPermissions = persistPermissions(
-            that,
-            that.locate('permissionsDialog').find('form')[0]
-        );
-        updatePermissionClasses(that, element, newPermissions);
-
-        that.locate('permissionsDialog').dialog('close');
-        that.events.onUpdatePermissions.fire(element, newPermissions);
-        return false;
-    };
-
-    /**
-     * Save the permissions from the supplied form to the layout
-     *
-     * @param that      layout manager instance
-     * @param form      permissions form
-     * @return array of newly-persisted permissions
-     */
-    var persistPermissions = function (that, form) {
-        // construct an appropriate data object from the form
-        var data = {
-            elementID: $(form).find('[name=nodeId]').val(),
-            action: 'updatePermissions',
-            deletable: $(form.deletable).is(':checked'),
-            movable: $(form.movable).is(':checked'),
-        };
-
-        if (form.editable) {
-            data.editable = $(form.editable).is(':checked');
-        }
-        if (form.addChildAllowed) {
-            data.addChildAllowed = $(form.addChildAllowed).is(':checked');
-        }
-
-        $.post(that.options.savePermissionsUrl, data, null, 'json');
-
-        return {
-            deletable: data.deletable,
-            movable: data.movable,
-            editable: data.editable,
-            addChildAllowed: data.addChildAllowed,
-        };
-    };
-
-    /**
-     * Update the permission-related classes on an element, according to the
-     * supplied array of permissions.
-     *
-     * @param element
-     * @param permissions
-     * @return
-     */
-    var updatePermissionClasses = function (that, element, permissions) {
-        setClass(
-            element,
-            permissions.deletable,
-            that.options.cssClassNames.deletable
-        );
-        setClass(
-            element,
-            permissions.movable,
-            that.options.cssClassNames.movable
-        );
-        setClass(
-            element,
-            permissions.editable,
-            that.options.cssClassNames.editable
-        );
-        setClass(
-            element,
-            permissions.addChildAllowed,
-            that.options.cssClassNames.addChildAllowed
-        );
-    };
-
-    /**
-     * Add or remove a classname on an element depending on the value of the
-     * supplied permission.  A permission of <code>true</code> will cause this
-     * method to add the CSS class, which a value of <code>false</code> will
-     * result in the CSS class being removed.  If the permission is undefined,
-     * the method will exit without making any modifications.
-     *
-     * @param element
-     * @param permission
-     * @param className
-     * @return
-     */
-    var setClass = function (element, permission, className) {
-        // if no permission is set, just return without modifying any classes
-        if (permission == undefined) return;
-
-        // otherwise, add or remove the class as appropriate
-        if (permission) {
-            $(element).addClass(className);
-        } else {
-            $(element).removeClass(className);
-        }
-    };
-
-    up.FragmentPermissionsMenu = function (container, options) {
-        var that = fluid.initView(
-            'up.FragmentPermissionsMenu',
-            container,
-            options
-        );
-
-        that.state = {};
-
-        that.refresh = function (link) {
-            var element = that.options.elementExtractor(that, link);
-            populateForm(that, element);
-
-            // initialize the permission form submission actions
-            that.locate('permissionsForm')
-                .unbind('submit')
-                .submit(function () {
-                    return updatePermissions(that, element);
-                });
-
-            return false;
-        };
-
-        return that;
-    };
-
-    // defaults
-    fluid.defaults('up.FragmentPermissionsMenu', {
-        savePermissionsUrl: 'mvc/layout',
-        elementExtractor: null,
-        titleExtractor: null,
-        nodeIdExtractor: up.defaultNodeIdExtractor,
-        cssClassNames: {
-            movable: 'movable',
-            editable: 'editable',
-            deletable: 'deletable',
-            addChildAllowed: 'canAddChildren',
-        },
-        selectors: {
-            formTitle: null,
-        },
-        events: {
-            onUpdatePermissions: null,
-        },
-        listeners: {
-            onUpdatePermissions: null,
-        },
-    });
-
-    up.FragmentPermissionsManager = function (container, options) {
-        var that = fluid.initView(
-            'up.FragmentPermissionsManager',
-            container,
-            options
-        );
-
-        that.menus = {};
-
-        // tabs permissions manager
-        that.locate('pageDialog').dialog({
-            width: 550,
-            modal: true,
-            autoOpen: false,
-        });
-        that.menus.pagePermissionsManager = up.FragmentPermissionsMenu(
-            that.locate('pageDialog'),
-            {
-                savePermissionsUrl: that.options.savePermissionsUrl,
-                elementExtractor: function () {
-                    return $('#portalNavigationList li.active');
-                },
-                titleExtractor: function () {
-                    return $(
-                        '#portalNavigationList li.active a.portal-navigation-link'
-                    ).attr('title');
-                },
-                selectors: {
-                    formTitle: 'h2',
-                },
-            }
-        );
-        that.locate('pageDialogLink').click(function () {
-            that.menus.pagePermissionsManager.refresh($(this));
-            that.locate('pageDialog').dialog('open');
-        });
-        // TODO: on update, refresh tab name, editing, delete
-
-        // columns permissions manager
-        that.locate('columnDialog').dialog({
-            width: 550,
-            modal: true,
-            autoOpen: false,
-        });
-        that.menus.columnPermissionsManager = up.FragmentPermissionsMenu(
-            that.locate('columnDialog'),
-            {
-                savePermissionsUrl: that.options.savePermissionsUrl,
-                elementExtractor: function (that, link) {
-                    return $(link).parents('.portal-page-column');
-                },
-                titleExtractor: function (element) {
-                    return up.formatMessage(that.options.messages.columnX, [
-                        $('.portal-page-column').index(element) + 1,
-                    ]);
-                },
-                selectors: {
-                    formTitle: 'h2',
-                },
-            }
-        );
-        that.locate('columnDialogLink').click(function () {
-            that.menus.columnPermissionsManager.refresh($(this));
-            that.locate('columnDialog').dialog('open');
-        });
-        // TODO: on update, refresh layout options
-
-        // portlet permissions manager
-        that.locate('portletDialog').dialog({
-            width: 550,
-            modal: true,
-            autoOpen: false,
-        });
-        that.menus.portletPermissionsManager = up.FragmentPermissionsMenu(
-            that.locate('portletDialog'),
-            {
-                savePermissionsUrl: that.options.savePermissionsUrl,
-                elementExtractor: function (that, link) {
-                    return $(link).parents('.up-portlet-wrapper');
-                },
-                titleExtractor: function (element) {
-                    // The h2 is the portlet header.  First link is the title and subsequent links
-                    // are the items in the "Options" menu, so make sure to only select the first one.
-                    return element
-                        .find('.up-portlet-wrapper-inner h2 a:eq(0)')
-                        .text();
-                },
-                selectors: {
-                    formTitle: 'h2',
-                },
-                events: {
-                    onUpdatePermissions: null,
-                },
-                listeners: {
-                    onUpdatePermissions: function (element, newPermissions) {
-                        if (newPermissions.movable) {
-                            element.removeClass('locked');
-                        } else {
-                            element.addClass('locked');
-                        }
-                        // TODO: Apply portlet permissions:
-                        // includes refreshing reorderer and displaying/hiding delete
-                    },
-                },
-            }
-        );
-        that.locate('portletDialogLink').click(function () {
-            that.menus.portletPermissionsManager.refresh($(this));
-            that.locate('portletDialog').dialog('open');
-        });
-
-        return that;
-    };
-
-    // defaults
-    fluid.defaults('up.FragmentPermissionsManager', {
-        savePermissionsUrl: 'mvc/layout',
-        selectors: {
-            formTitle: null,
-            pageDialog: '.edit-page-permissions-dialog',
-            pageDialogLink: '#editPagePermissionsLink',
-            columnDialog: '.edit-column-permissions-dialog',
-            columnDialogLink: '.portal-column-permissions-link',
-            portletDialog: '.edit-portlet-permissions-dialog',
-            portletDialogLink: '.portlet-permissions-link',
-        },
-        messages: {
-            columnX: 'Column {0}',
-        },
-    });
-})(jQuery, fluid);
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-ga.js b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-ga.js
deleted file mode 100755
index ec6b5e96843..00000000000
--- a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-ga.js
+++ /dev/null
@@ -1,455 +0,0 @@
-/*
- * Licensed to Apereo under one or more contributor license
- * agreements. See the NOTICE file distributed with this work
- * for additional information regarding copyright ownership.
- * Apereo licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file
- * except in compliance with the License.  You may obtain a
- * copy of the License at the following location:
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-var uportal = uportal || {};
-
-(function ($, _) {
-    /**
-     * Finds the appropriate property configuration for the current institution
-     */
-    var findPropertyConfig = function () {
-        if (up.analytics.model == null) {
-            return null;
-        }
-
-        if (_.isArray(up.analytics.model.hosts)) {
-            var propertyConfig = _.find(
-                up.analytics.model.hosts,
-                function (propertyConfig) {
-                    if (propertyConfig.name == up.analytics.host) {
-                        return propertyConfig;
-                    }
-                }
-            );
-
-            if (propertyConfig != null) {
-                return propertyConfig;
-            }
-        }
-
-        return up.analytics.model.defaultConfig;
-    };
-
-    /**
-     * Set the defaultConfig.config array as global settings
-     */
-    var configureDefaults = function (propertyConfig) {
-        //console.log(propertyConfig);
-        var defaults = propertyConfig.config || [];
-        _.each(defaults, function (setting) {
-            // each setting is an object that might have more than 1 key-value pair
-            //console.log(setting);
-            _.each(Object.keys(setting), function (key) {
-                up.gtag('set', key, setting[key]);
-            });
-        });
-    };
-
-    /**
-     * Set the dimensions that apply to the current user
-     */
-    var getDimensions = function (propertyConfig) {
-        var dimensions = {};
-        _.each(propertyConfig.dimensionGroups || [], function (setting) {
-            dimensions['dimension' + setting.name] = setting.value;
-        });
-        return dimensions;
-    };
-
-    /**
-     * Create the tracker with the propertyId and configuration from the
-     * specified propertyConfig
-     */
-    var createTracker = function (propertyConfig) {
-        var createSettings = {};
-        _.each(propertyConfig.config || [], function (setting) {
-            // Name isn't supported, we assume the default tracker is used in other
-            // places
-            if (setting.name != 'name') {
-                createSettings[setting.name] = setting.value;
-            }
-        });
-        up.gtag('config', propertyConfig.propertyId, {
-            send_page_view: false,
-        });
-    };
-
-    /**
-     * Build the page URI for a tab
-     */
-    var getTabUri = function (fragmentName, tabName) {
-        if (up.analytics.pageData.tab != null) {
-            fragmentName =
-                fragmentName || up.analytics.pageData.tab.fragmentName;
-            tabName = tabName || up.analytics.pageData.tab.tabName;
-        }
-
-        var uri = '/';
-
-        if (fragmentName != null) {
-            uri += 'tab/' + fragmentName;
-
-            if (tabName != null) {
-                uri += '/' + tabName;
-            }
-        }
-
-        return uri;
-    };
-
-    /**
-     * Set variables specific to the current page
-     */
-    var getPageVariables = function (fragmentName, tabName) {
-        if (up.analytics.pageData.tab != null) {
-            fragmentName =
-                fragmentName || up.analytics.pageData.tab.fragmentName;
-            tabName = tabName || up.analytics.pageData.tab.tabName;
-        }
-
-        var title;
-        if (tabName != null) {
-            title = 'Tab: ' + tabName;
-        } else if (up.analytics.pageData.urlState == null) {
-            title = 'Portal Home';
-        } else {
-            title = 'No Tab';
-        }
-        return {
-            page_location: getTabUri(fragmentName, tabName),
-            page_title: title,
-        };
-    };
-
-    /**
-     * Safe way to resolve the portlet's fname from the windowId, falls back to
-     * just using the portlet's windowId as the value if no fname is found in the
-     * portletData
-     */
-    var getPortletFname = function (windowId) {
-        var portletData = up.analytics.portletData[windowId];
-        if (portletData == null) {
-            return windowId;
-        }
-
-        return portletData.fname;
-    };
-
-    /**
-     * Safe way to resolve the portlet's title from the windowId, falls back to
-     * just using getPortletFname(windowId) if the title can't be found
-     */
-    var getRenderedPortletTitle = function (windowId) {
-        var portletWindowWrapper = $(
-            'div.up-portlet-windowId-content-wrapper.' + windowId
-        );
-        if (portletWindowWrapper == null) {
-            return getPortletFname(windowId);
-        }
-
-        var portletWrapper = portletWindowWrapper.parents(
-            'div.up-portlet-wrapper-inner'
-        );
-        if (portletWrapper == null) {
-            return getPortletFname(windowId);
-        }
-
-        var portletTitle = portletWrapper.find('div.up-portlet-titlebar h2 a');
-        if (portletTitle == null) {
-            return getPortletFname(windowId);
-        }
-
-        return portletTitle.text().trim();
-    };
-
-    /**
-     * Build the portlet URI for the specified portlet
-     */
-    var getPortletUri = function (fname) {
-        return '/portlet/' + fname;
-    };
-
-    /**
-     * Set variables specific to the specified portlet
-     */
-    var getPortletVariables = function (windowId, portletData) {
-        var portletTitle = getRenderedPortletTitle(windowId);
-
-        if (portletData == null) {
-            portletData = up.analytics.portletData[windowId];
-        }
-        return {
-            page_title: 'Portlet: ' + portletTitle,
-            page_location: getPortletUri(portletData.fname),
-        };
-    };
-
-    /**
-     * Finds a child element based on the selector and then return the first
-     * class element that is not equal to excludedClasses or contained in the
-     * excludedClasses array
-     */
-    var getInfoClass = function (selectorFunction, excludedClasses) {
-        // Convert excludedClasses to an array for simpler code below
-        if (!_.isArray(excludedClasses)) {
-            excludedClasses = [excludedClasses];
-        }
-
-        var classAttribute = selectorFunction().attr('class');
-        if (classAttribute == null) {
-            return null;
-        }
-
-        var classes = classAttribute.split(/\s+/);
-        return _.find(classes, function (cls) {
-            if (!_.contains(excludedClasses, cls)) {
-                return cls;
-            }
-        });
-    };
-
-    /**
-     * Determine the fname of the portle the clicked flyout was rendered for
-     */
-    var getFlyoutFname = function (clickedLink) {
-        return getInfoClass(function () {
-            return clickedLink.parents('div.up-portlet-fname-subnav-wrapper');
-        }, 'up-portlet-fname-subnav-wrapper');
-    };
-
-    /**
-     * Determine the fname of the portle the clicked flyout was rendered for
-     */
-    var getExternaLinkWindowId = function (clickedLink) {
-        return getInfoClass(function () {
-            return clickedLink.parents(
-                'div.up-portlet-windowId-content-wrapper'
-            );
-        }, 'up-portlet-windowId-content-wrapper');
-    };
-
-    /**
-     * Handler for sending an analytics event when a link is clicked and then
-     * dealing with opening a new window or emulating the click
-     */
-    var handleLinkClickEvent = function (event, clickedLink, eventOptions) {
-        // Click will open in a new window if it is the middle button or the
-        // meta or control keys are held
-        var newWindow =
-            event.button == 1 ||
-            event.metaKey ||
-            event.ctrlKey ||
-            clickedLink.attr('target') != null;
-
-        var clickFunction;
-        clickFunction = newWindow
-            ? function () {}
-            : function () {
-                  document.location = clickedLink.attr('href');
-              };
-
-        up.gtag(
-            'event',
-            'page_view',
-            $.extend(
-                {
-                    event_callback: clickFunction,
-                },
-                eventOptions
-            )
-        );
-
-        // If not opening a new window prevent the event and set the fallback
-        // to make sure the page navigates even if the hitCallback
-        // is never called
-        if (!newWindow) {
-            // Fallback in case hitCallback takes too long to get called, don't
-            // want clicks to hang
-            setTimeout(clickFunction, 200);
-
-            event.preventDefault();
-        }
-    };
-
-    /**
-     * Add click handlers to all of the flyout menus to fire flyout events when
-     * they are used
-     */
-    var addFlyoutHandlers = function () {
-        $('ul.fl-tabs li.portal-navigation a.portal-subnav-link').click(
-            function (event) {
-                var clickedLink = $(this);
-
-                // Find the target portlet's title
-                var portletFlyoutTitle = clickedLink
-                    .find('span.portal-subnav-label')
-                    .text();
-
-                // Find the target portlet's fname
-                var fname = getFlyoutFname(clickedLink);
-
-                // Setup the page level state
-                var pageVariables = getPageVariables();
-
-                // Send the event and deal with the click
-                handleLinkClickEvent(
-                    event,
-                    clickedLink,
-                    $.extend(
-                        {
-                            event_category: 'Flyout Link',
-                            event_action: getPortletUri(fname),
-                            event_label: portletFlyoutTitle,
-                        },
-                        pageVariables
-                    )
-                );
-            }
-        );
-    };
-
-    /**
-     * Inspects all clicks on links, any of the clicks that result in existing to
-     * a different host are tracked as Outbound Link events
-     */
-    var addExternalLinkHandlers = function () {
-        $('a').click(function (event) {
-            var clickedLink = $(this);
-
-            var linkHost = clickedLink.prop('hostname');
-            if (linkHost != '' && linkHost != document.domain) {
-                var windowId = getExternaLinkWindowId(clickedLink);
-                var eventVariables = null;
-                eventVariables =
-                    windowId == null
-                        ? getPageVariables()
-                        : getPortletVariables(windowId);
-
-                // Send the event and deal with the click
-                handleLinkClickEvent(
-                    event,
-                    clickedLink,
-                    $.extend(
-                        {
-                            event_category: 'Outbound Link',
-                            event_action: clickedLink.prop('href'),
-                            event_label: clickedLink.text(),
-                        },
-                        eventVariables
-                    )
-                );
-            }
-        });
-    };
-
-    var addMobileListTabHandlers = function () {
-        $('ul.up-portal-nav li.up-tab').click(function () {
-            var clickedTab = $(this);
-
-            // Ignore clicks on already open tabs
-            if (clickedTab.hasClass('up-tab-open')) {
-                return;
-            }
-
-            var fragmentName = getInfoClass(function () {
-                return clickedTab.find('div.up-tab-owner');
-            }, 'up-tab-owner');
-
-            var tabName = clickedTab.find('span.up-tab-name').text().trim();
-
-            var pageVariables = getPageVariables(fragmentName, tabName);
-
-            up.gtag('event', 'page_view', pageVariables);
-        });
-    };
-
-    $(document).ready(function () {
-        var propertyConfig = findPropertyConfig();
-
-        // No property config means nothing to do
-        if (propertyConfig == null) {
-            return;
-        }
-
-        // Set default config
-        configureDefaults(propertyConfig);
-
-        // Create the tracker
-        createTracker(propertyConfig);
-
-        // Set Dimensions
-        var dimensions = getDimensions(propertyConfig);
-
-        up.gtag('event', 'page_view', dimensions);
-
-        // Page Event
-        var pageVariables = getPageVariables();
-
-        // Don't bother sending the view in MAX WindowState
-        if (up.analytics.pageData.urlState != 'MAX') {
-            up.gtag('event', 'page_view', $.extend(pageVariables, dimensions));
-        }
-
-        up.gtag(
-            'event',
-            'timing_complete',
-            $.extend(
-                {
-                    event_category: 'tab',
-                    name: getTabUri(),
-                    value: up.analytics.pageData.executionTimeNano,
-                },
-                pageVariables,
-                dimensions
-            )
-        );
-
-        // Portlet Events
-        _.each(up.analytics.portletData, function (portletData, windowId) {
-            // TODO configure portlet analytics include/exclude list
-            if (portletData.fname == 'google-analytics-config') {
-                return;
-            }
-
-            var portletVariables = getPortletVariables(windowId, portletData);
-            up.gtag('event', 'page_view', portletVariables);
-            up.gtag(
-                'event',
-                'timing_complete',
-                $.extend(
-                    {
-                        event_category: 'tab',
-                        name: getTabUri(),
-                        value: up.analytics.pageData.executionTimeNano,
-                    },
-                    portletVariables,
-                    dimensions
-                )
-            );
-        });
-
-        // Add handlers to deal with click events on flyouts
-        addFlyoutHandlers();
-
-        // Add handlers to deal with click events on external links
-        addExternalLinkHandlers();
-
-        // Add handlers to deal with "tab" clicks on the mobile accordian view
-        addMobileListTabHandlers();
-    });
-})(jQuery, _);
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-layout-draggable-manager.js b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-layout-draggable-manager.js
deleted file mode 100644
index e8007a34a3e..00000000000
--- a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-layout-draggable-manager.js
+++ /dev/null
@@ -1,480 +0,0 @@
-/*
- * Licensed to Apereo under one or more contributor license
- * agreements. See the NOTICE file distributed with this work
- * for additional information regarding copyright ownership.
- * Apereo licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file
- * except in compliance with the License.  You may obtain a
- * copy of the License at the following location:
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-/**
- * The LayoutDraggableManager component houses the UI Gallery's initial drag
- * and drop implementation. The implementation makes use of jQuery UI draggable
- * and droppable objects. As of this implementation, a user can drag a 'portlet'
- * thumbnail that appears in the gallery 'Add Stuff' tab and drag it to the top
- * of any available column. The ability to drag and drop a 'portlet' thumbnail
- * into a specific location does not yet exist.
- *
- * For more information on the portal gallery, please see the below url:
- * https://wiki.jasig.org/display/UPC/Customize+Portal+Gallery
- *
- * Some configurations listed below stem from jQuery UI droppable and draggable objects.
- * For more information, please see the below urls:
- * http://jqueryui.com/demos/droppable/
- * http://jqueryui.com/demos/draggable/
- *
- * -------------------
- * Available selectors
- * -------------------
- * body: reference to portal's <body> element.
- * Default: Selector "#portal"
- *
- * galleryList: reference to the list of portlets rendered by the portal gallery.
- * Default: Selector "#galleryPortletList"
- *
- * columnContainer: reference to outermost container to envelopes all portal columns.
- * Default: Selector "#portalPageBodyColumns"
- *
- * column: reference to portal column container.
- * Default: Selector ".portal-page-column"
- *
- * innerColumn: reference to inner portal column container.
- * Default: Selector ".portal-page-column-inner"
- *
- * dragHandle: reference to 'gripper' handle rendered out by the portal gallery.
- * Default: Selector ".portlet-thumb-gripper"
- *
- * pseudoDropTarget: reference to visual indicator that appears when a gallery list item is dragged
- * over a portal column.
- * Default: Selector ".layout-draggable-drop-target"
- *
- * loader: reference to the gallery loading screen.
- * Default: Selector "#galleryLoader"
- *
- * accept:  reference to acceptable draggable element. All draggables that match the selector will be accepted.
- * Default: Selector ".portlet"
- *
- * ----------------
- * Available styles
- * ----------------
- * pseudoDropTarget: reference to a class name that is applied by default to the drop target <div>.
- * Default: String "layout-draggable-drop-target"
- *
- * targetDropped: reference to a class name that is applied to the drop target <div> when an item has been dropped.
- * Default: String "layout-draggable-target-dropped"
- *
- * ----------------
- * Available events
- * ----------------
- * onDropTarget: reference to an event that is triggered when a list item is successfully dropped.
- * Default: null
- *
- * ---------------------------
- * Other Configuration Options
- * ---------------------------
- * pseudoDropTargetLabel: reference to label that appears within the drop target <div>.
- * Default: Drop Here
- *
- * iframeFix: Prevent iframes from capturing the mousemove events during a drag.
- * Default: Boolean true
- *
- * opacity: Opacity for the helper (avatar) while being dragged.
- * Default: Number .80
- *
- * helper: Allows for a helper (avatar) element to be used for dragging display. Possible values: 'original', 'clone', Function.
- * Default: String "clone"
- *
- * revert: If set to true, the element will return to its start position when dragging stops. Possible string values: 'valid', 'invalid'.
- * If set to invalid, revert will only occur if the draggable has not been dropped on a droppable. For valid, it's the other way around.
- * Default: Boolean, String "invalid"
- *
- * cursor: The css cursor during the drag operation.
- * Default: String "move"
- *
- * cursorAt: Moves the dragging helper so the cursor always appears to drag from the same position.
- * Default: Object {top: 7, left: 100 }
- *
- * stack: Controls the z-Index of the set of elements that match the selector, always brings to front the dragged item.
- * Default: Selector ".ui-draggable-dragging"
- *
- * tolerance: Specifies which mode to use for testing whether a draggable is 'over' a droppable. Possible values: 'fit', 'intersect', 'pointer', 'touch'.
- * Default: String "intersect"
- *
- */
-
-'use strict';
-var up = up || {};
-
-(function ($, fluid) {
-    /**
-     * Private. Utility function that returns a boolean if the passed selector
-     * is found within the passed container.
-     *
-     * @param {Object} container - reference to jQuery DOM object.
-     * @param {Object} selector - reference to a jQuery selector that may exist within the container.
-     */
-    var doesContain = function (container, selector) {
-        var value;
-
-        value = container.find(selector).length > 0;
-
-        return value;
-    }; // end:function.
-
-    /**
-     * Private. This function handles the placement of the dropTarget within the portal's columns.
-     * This function is triggered when a gallery list item is dragged over a portal column.
-     *
-     * @param {Object} that - reference to LayoutDraggableManager instance.
-     * @param {Object} target - reference to a DOM element. Specifically, a portal column.
-     */
-    var dragOverHandler = function (that, target) {
-        var column;
-        var portlets;
-        var portletLocked;
-        var firstMovablePortlet;
-        var children;
-        var dropTarget;
-
-        // Obtain reference to column, contained portlets and the dropTarget.
-        column = $(target);
-        portlets = column.find(that.options.selectors.portlet);
-        dropTarget = $(that.elem.pseudoDropTargetMarkUp);
-
-        // Determine the contents of a column. Does the column contain any portlets?
-        if (portlets.length > 0) {
-            // Column contains portlets. Are any portlets locked?
-            portletLocked = column.find(
-                that.options.selectors.lastPortletLocked
-            );
-            if (portletLocked.length > 0) {
-                // Insert drop target after last instance of locked portlet.
-                dropTarget.insertAfter(portletLocked);
-            } else {
-                // Insert drop target before the first movable portlet.
-                firstMovablePortlet = column
-                    .find(that.options.selectors.portletMovable)
-                    .first();
-                dropTarget.insertBefore(firstMovablePortlet);
-            } // end:if.
-        } else {
-            // Column does not contain portlets. Does the column contain any children
-            // such as a permissions header?
-            children = column.children();
-            if (children.length > 0) {
-                // Column contains children. Insert drop target after last child in column.
-                dropTarget.insertAfter(children.get(children.length - 1));
-            } else {
-                // Column does not contain children. Insert dropTarget at top of column.
-                column.prepend(dropTarget);
-            } // end:if.
-        } // end:if.
-
-        // Reveal dropTarget.
-        dropTarget.show();
-    }; // end:function.
-
-    /**
-     * Private. Removes dropTarget from portal columns.
-     *
-     * @param {Object} that - reference to LayoutDraggableManager instance.
-     * @param {Object} target - reference to a DOM element. Specifically, a portal column.
-     */
-    var dragOutHandler = function (that, target) {
-        var column;
-        var dropTarget;
-
-        // Obtain reference to the column & contained dropTarget.
-        column = $(target);
-        dropTarget = column.find(that.options.selectors.pseudoDropTarget);
-        dropTarget.remove();
-    }; // end:function.
-
-    /**
-     * Private. Manages the UI when a gallery list item is dropped onto a dropTarget.
-     *
-     * @param {Object} that - reference to LayoutDraggableManager instance.
-     * @param {Object} target - reference to a DOM element. Specifically, a portal column.
-     */
-    var dragDropHandler = function (that, target) {
-        var loader;
-        var column;
-        var isPortlets;
-        var isPortletsMovable;
-        var dropTarget;
-        var sibling;
-        var targetID;
-        var method;
-
-        // Obtain reference to the loading screen, column and contained dropTarget.
-        loader = that.elem.loader;
-        column = $(target);
-        dropTarget = column.find(that.options.selectors.pseudoDropTarget);
-
-        // Reveal gallery loader.
-        loader.css({
-            margin: '7px 0 0 0',
-            opacity: '.70',
-            'background-color': '#000',
-        });
-        up.showLoader(loader);
-
-        // Apply visual loading to dropTarget.
-        dropTarget.addClass(that.options.styles.targetDropped);
-
-        // The logic below determines the value of the 'targetID' and 'method' variables,
-        // which are then broadcast to the onDropTarget event. The logic below is as follows:
-        //
-        // 1. If a column contains no portlets. (targetID = column id, method = 'appendAfter').
-        // 2. If all portlets within a column are locked. (targetID = column id, method = 'appendAfter').
-        // 3. If a column contains movable portlets.
-        //    a] Detect portlet siblings around the drop target.
-        //       1) If previous sibling: (targetID = previous portlet id, method = 'appendAfter').
-        //       2) If next sibling: (targetID = next portlet id, method = 'insertBefore').
-
-        // Determine the contents of a column. Does the column contain any portlets?
-        isPortlets = doesContain(column, that.options.selectors.portlet);
-        if (isPortlets) {
-            // When portlets exist, are any of them movable?
-            isPortletsMovable = doesContain(
-                column,
-                that.options.selectors.portletMovable
-            );
-            if (isPortletsMovable) {
-                // Movable portlets exist. Detect placement of dropTarget.
-                sibling = dropTarget.prev(
-                    that.options.selectors.portlet + ':first'
-                );
-                if (sibling.length > 0) {
-                    targetID = up.defaultNodeIdExtractor(sibling[0]);
-                    method = that.options.appendAfter;
-                } else {
-                    sibling = dropTarget.next(
-                        that.options.selectors.portlet + ':first'
-                    );
-                    targetID = up.defaultNodeIdExtractor(sibling[0]);
-                    method = that.options.insertBefore;
-                } // end:if.
-            } else {
-                // All portlets are locked. Pass the column ID.
-                targetID = up.defaultNodeIdExtractor(target);
-                method = that.options.appendAfter;
-            } // end:if.
-        } else {
-            // No portlets exist. Pass the column ID.
-            targetID = up.defaultNodeIdExtractor(target);
-            method = that.options.appendAfter;
-        } // end:if.
-
-        // Fire onDropTarget event.
-        that.events.onDropTarget.fire(method, targetID);
-    }; // end:function.
-
-    /**
-     * Initializes elem object that stores references to DOM containers that
-     * are used through out the component.
-     *
-     * @param {Object} that - reference to LayoutDraggableManager instance.
-     */
-    var initialize = function (that) {
-        // Element mapping. Caches elements that mostly exist outside the realm of the component's scope.
-        that.elem = {};
-        that.elem.columnContainer = $(that.options.selectors.body).find(
-            that.options.selectors.columnContainer
-        );
-        that.elem.pseudoDropTargetMarkUp =
-            '<div class="' +
-            that.options.styles.pseudoDropTarget +
-            '"><span>' +
-            that.options.pseudoDropTargetLabel +
-            '</span></div>';
-        that.elem.loader = $(that.options.selectors.loader);
-    }; // end:function.
-
-    /**
-     * Creator function for the LayoutDraggableManager component.
-     *
-     * @param {Object} container - reference to HTML DOM element by ID.
-     * @param {Object} options - reference to object containing all configurations.
-     */
-    up.LayoutDraggableManager = function (container, options) {
-        var that;
-        that = fluid.initView('up.LayoutDraggableManager', container, options);
-
-        /**
-         * This function inserts a <div> at the top each of the portal's columns.
-         * The inserted <div> acts as a drop target.
-         *
-         * @param {Object} that - reference to an instance of the LayoutDraggableManager component.
-         */
-        that.enableEligibleColumns = function () {
-            var eligibleColumns;
-            var droppableInnerColumns;
-
-            // Obtain a reference to all eligible or "droppable" columns.
-            eligibleColumns = that.elem.columnContainer.find(
-                that.options.selectors.canAddChildren
-            );
-            droppableInnerColumns = eligibleColumns.find(
-                that.options.selectors.innerColumn
-            );
-
-            // Make columns droppable.
-            that.makeDroppable(droppableInnerColumns);
-        }; // end:function.
-
-        /**
-         * This function takes a jQuery selector and applies the jQuery UI
-         * droppable object to the passed selector. It also makes use of
-         * droppable's over, out, and drop callback functions.
-         *
-         * @param {Object} selector - reference to jQuery selector.
-         * The passed selector should be a reference to a portal column.
-         */
-        that.makeDroppable = function (selector) {
-            selector.droppable({
-                accept: that.options.selectors.accept,
-                over: function (event) {
-                    dragOverHandler(that, event.target);
-                },
-                out: function (event) {
-                    dragOutHandler(that, event.target);
-                },
-                drop: function (event) {
-                    dragDropHandler(that, event.target);
-                },
-            });
-        }; // end:function.
-
-        /**
-         * This function takes a jQuery selector and applies the jQuery UI
-         * draggable object to the passed selector.
-         *
-         * @param {Object} selector - reference to jQuery selector.
-         * The passed selector should be a reference to gallery list items.
-         */
-        that.makeDraggable = function (selector) {
-            var dragHandle;
-
-            dragHandle = selector.find(that.options.selectors.dragHandle);
-
-            // The position style definition has been added to the body
-            // to accommodate a FireFox/jQuery UI specific bug. We are using
-            // jQuery UI Draggable to drag portlets from the gallery to the
-            // portal's columns. Firefox has an issue placing the cursor
-            // correctly on the dragged element. Adding a position of relative
-            // fixes this issue. A fix for this is schedule for jQuery UI 1.11.
-            // This fix has been added using JavaScript due to the fact that
-            // adding the position definition breaks the functionality in
-            // Chrome, Safari and IE.
-            //
-            // http://stackoverflow.com/questions/18008657/jquery-ui-draggable-1-10-3-issue-with-firefox-not-finding-cursor-center-when-win
-            if ($.browser.mozilla) {
-                $(that.options.selectors.body).css({position: 'relative'});
-            }
-
-            selector.draggable({
-                handle: dragHandle,
-                appendTo: that.options.selectors.body,
-                iframeFix: that.options.iframeFix,
-                opacity: that.options.opacity,
-                helper: that.options.helper,
-                revert: that.options.revert,
-                cursor: that.options.cursor,
-                cursorAt: that.options.cursorAt,
-                stack: that.options.stack,
-                zIndex: 99999,
-                containment: that.options.selectors.body,
-                start: function (event, ui) {
-                    that.enableEligibleColumns(event, ui);
-                },
-            });
-        }; // end:function.
-
-        /**
-         * This function initializes drag and drop functionality.
-         * It applies the jQuery UI draggable object to a collection
-         * of list items passed over from a fluid.pager implementation.
-
-         * @param {Object} newModel - reference to the updated state of the pager model.
-         * @param {Object} oldModel - reference to the old state of the pager model.
-         * @param {Object} pager - reference to an instance of the pager component.
-         */
-        that.initDragAndDrop = function (newModel, oldModel, pager) {
-            var galleryList;
-            var listItem;
-
-            // DOM Caching.
-            galleryList = pager.container.find(
-                that.options.selectors.galleryList
-            );
-
-            // Enforce constraint. Only list items on the 'Add Stuff' tab should be draggable.
-            if (
-                galleryList.attr('id') !== that.options.useContentPortletListID
-            ) {
-                // Set gallery items as draggable. Delay setting columns
-                // as droppable until an item is dragged.
-                listItem = galleryList.find('li');
-                that.makeDraggable(listItem);
-            } // end:if.
-        }; // end:function.
-
-        initialize(that);
-        return that;
-    }; // end:component.
-
-    /**
-     * LayoutDraggableManager
-     * Defaults function for the LayoutDroppables component.
-     ---------------------------------*/
-    fluid.defaults('up.LayoutDraggableManager', {
-        selectors: {
-            body: 'body',
-            galleryList: '.portlet-list',
-            columnContainer: '#portalPageBodyColumns',
-            column: '.portal-page-column',
-            innerColumn: '.portal-page-column-inner',
-            dragHandle: '.portlet-thumb-gripper',
-            pseudoDropTarget: '.layout-draggable-drop-target',
-            loader: '#galleryLoader',
-            accept: '.portlet',
-            canAddChildren: '.canAddChildren,.up-fragment-admin',
-            portlet: '[id*=portlet_]',
-            lastPortletLocked:
-                '[id*=portlet_].locked:not(.up-fragment-admin):last', // Fragment owners get the up-fragment-admin class,
-            portletMovable:
-                '[id*=portlet_].movable,[id*=portlet_].up-fragment-admin', // which allows them to bypass the restrictions.
-        },
-        styles: {
-            pseudoDropTarget: 'layout-draggable-drop-target',
-            targetDropped: 'layout-draggable-target-dropped',
-            canAddChildren: 'canAddChildren',
-        },
-        events: {
-            onDropTarget: null,
-        },
-        pseudoDropTargetLabel: 'Drop Here',
-        iframeFix: true,
-        opacity: '.80',
-        helper: 'clone',
-        revert: 'invalid',
-        cursor: 'move',
-        cursorAt: {top: 8, left: 10},
-        stack: '.portlet .ui-draggable',
-        tolerance: 'intersect',
-        insertBefore: 'insertBefore',
-        appendAfter: 'appendAfter',
-        nbsp: '&nbsp;',
-        useContentPortletListID: 'useContentPortletList',
-    });
-})(jQuery, fluid);
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-layout-gallery.js b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-layout-gallery.js
deleted file mode 100644
index 435bd2a0074..00000000000
--- a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-layout-gallery.js
+++ /dev/null
@@ -1,714 +0,0 @@
-/*
- * Licensed to Apereo under one or more contributor license
- * agreements. See the NOTICE file distributed with this work
- * for additional information regarding copyright ownership.
- * Apereo licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file
- * except in compliance with the License.  You may obtain a
- * copy of the License at the following location:
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-'use strict';
-var up = up || {};
-
-(function ($, fluid) {
-    up.AjaxLayoutCategoryListView = function (container, overallThat, options) {
-        // construct the new component
-        var that = fluid.initView(
-            'up.AjaxLayoutCategoryListView',
-            container,
-            options
-        );
-
-        // initialize a state map for this component
-        that.state = {};
-
-        var cutpoints = [
-            {
-                id: '~categoryContainer:',
-                selector: '.category-choice-container',
-            },
-            {id: 'category', selector: '.category-choice'},
-            {id: 'categoryLink', selector: '.category-choice-link'},
-            {id: 'categoryName', selector: '.category-choice-name'},
-        ];
-
-        that.refresh = function () {
-            // Build an array of all categories containing at least
-            // one deep member, sorted by name
-            var categories = [];
-            categories.push({
-                id: '',
-                name: that.options.rootCategoryName,
-                description: that.options.rootCategoryDescription,
-                categories: [],
-                deepCategories: [],
-                portlets: [],
-                deepPortlets: [],
-            });
-            $(overallThat.registry.getAllCategories()).each(
-                function (index, category) {
-                    if (
-                        category.deepPortlets.length > 0 &&
-                        category.id !== 'local.1'
-                    ) {
-                        categories.push(category);
-                    }
-                }
-            );
-            categories.sort(
-                up.getStringPropertySortFunction(
-                    'name',
-                    that.options.rootCategoryName
-                )
-            );
-
-            var tree = {children: []};
-
-            var s = overallThat.state.currentCategory || '';
-
-            $(categories).each(function (index, category) {
-                tree.children.push({
-                    ID: 'categoryContainer:',
-                    children: [
-                        {
-                            ID: 'category',
-                            decorators: [
-                                {
-                                    type: 'addClass',
-                                    classes: category.id === s ? 'active' : '',
-                                },
-                            ],
-                        },
-                        {
-                            ID: 'categoryLink',
-                            decorators: [
-                                {
-                                    type: 'jQuery',
-                                    func: 'click',
-                                    args: function () {
-                                        overallThat.events.onCategorySelect.fire(
-                                            overallThat,
-                                            category
-                                        );
-                                        $('.pager-button-up-inner').click();
-                                    },
-                                },
-                            ],
-                        },
-                        {ID: 'categoryName', value: category.name},
-                    ],
-                });
-            });
-
-            if (that.state.templates) {
-                fluid.reRender(
-                    that.state.templates,
-                    $(container).find('.categories'),
-                    tree,
-                    {cutpoints: cutpoints}
-                );
-            } else {
-                that.state.templates = fluid.selfRender(
-                    $(container).find('.categories'),
-                    tree,
-                    {cutpoints: cutpoints}
-                );
-            }
-        };
-
-        that.refresh();
-        return that;
-    };
-
-    fluid.defaults('up.AjaxLayoutCategoryListView', {
-        rootCategoryName: 'ALL',
-        rootCategoryDescription: 'All Categories',
-    });
-
-    up.AjaxLayoutPortletListView = function (container, overallThat, options) {
-        var that;
-        var cutpoints;
-
-        // Construct the new component.
-        that = fluid.initView(
-            'up.AjaxLayoutPortletListView',
-            container,
-            options
-        );
-
-        // Initialize draggable manager.
-        that.dragManager = fluid.initSubcomponent(that, 'dragManager', [
-            that.container,
-            fluid.COMPONENT_OPTIONS,
-        ]);
-
-        // DragManger 'onDropTarget' callback.
-        that.dragManager.events.onDropTarget.addListener(
-            function (method, targetID) {
-                that.state.drag.overall.events.onPortletDrag.fire(
-                    that.state.drag.data,
-                    method,
-                    targetID
-                );
-            }
-        );
-
-        // initialize a state map for this component
-        that.state = {};
-
-        cutpoints = [
-            {id: 'portlet:', selector: '.portlet'},
-            {id: 'portletWrapper', selector: '.portlet-wrapper'},
-            {id: 'portletLink', selector: '.portlet-thumb-link'},
-            {id: 'portletTitle', selector: '.portlet-thumb-titlebar'},
-            {
-                id: 'portletDescription',
-                selector: '.portlet-thumb-description',
-            },
-            {id: 'portletIcon', selector: '.portlet-thumb-icon'},
-        ];
-
-        that.refresh = function () {
-            var portlets;
-            var members;
-
-            // Build a list of all portlets that are a deep member of the
-            // currently-selected category, sorted by title
-            portlets = [];
-            members =
-                overallThat.state.currentCategory &&
-                overallThat.state.currentCategory !== ''
-                    ? overallThat.registry.getMemberPortlets(
-                          overallThat.state.currentCategory,
-                          true
-                      )
-                    : overallThat.registry.getAllPortlets();
-            $(members).each(function (index, portlet) {
-                if (
-                    !overallThat.state.portletRegex ||
-                    overallThat.state.portletRegex.test(portlet.title) ||
-                    overallThat.state.portletRegex.test(portlet.name) ||
-                    overallThat.state.portletRegex.test(portlet.fname) ||
-                    overallThat.state.portletRegex.test(portlet.description)
-                ) {
-                    if (!portlet.iconUrl) {
-                        portlet.iconUrl = that.options.defaultIconUrl;
-                    }
-                    portlets.push(portlet);
-                }
-            });
-            portlets.sort(up.getStringPropertySortFunction('title'));
-
-            if (that.state.pager) {
-                up.refreshPager(that.state.pager, portlets);
-            } else {
-                // define the column structure for the portlets pager
-                var columnDefs = [
-                    {
-                        key: 'portletWrapper',
-                        valuebinding: '*.id',
-                        components: function (row) {
-                            return {
-                                decorators: [
-                                    {
-                                        type: 'jQuery',
-                                        func: 'mousedown',
-                                        args: function () {
-                                            // Update drag state. This state object is read
-                                            // when a thumbnail is dropped into a portal column.
-                                            that.state.drag = {
-                                                overall: overallThat,
-                                                data: row,
-                                            };
-                                        },
-                                    },
-                                    {
-                                        type: 'attrs',
-                                        attributes: {
-                                            title:
-                                                row.title +
-                                                ' (' +
-                                                row.name +
-                                                ')',
-                                        },
-                                    },
-                                ],
-                            };
-                        },
-                    },
-                    {
-                        key: 'portletLink',
-                        valuebinding: '*.id',
-                        components: function (row) {
-                            return {
-                                decorators: [
-                                    {
-                                        type: 'jQuery',
-                                        func: 'click',
-                                        args: function () {
-                                            overallThat.events.onPortletSelect.fire(
-                                                overallThat,
-                                                row
-                                            );
-                                        },
-                                    },
-                                ],
-                            };
-                        },
-                    },
-                    {
-                        key: 'portletTitle',
-                        valuebinding: '*.title',
-                    },
-                    {
-                        key: 'portletDescription',
-                        valuebinding: '*.description',
-                    },
-                    {
-                        key: 'portletIcon',
-                        valuebinding: '*.id',
-                        components: function (row) {
-                            return {
-                                decorators: [
-                                    {
-                                        type: 'attrs',
-                                        attributes: {
-                                            style:
-                                                'background: url(' +
-                                                row.iconUrl +
-                                                ') top left no-repeat;',
-                                        },
-                                    },
-                                ],
-                            };
-                        },
-                    },
-                ];
-
-                // set the other pager options
-                var pagerOptions = {
-                    dataModel: portlets,
-                    annotateColumnRange: 'portletTitle',
-                    columnDefs: columnDefs,
-                    components: {
-                        bodyRenderer: {
-                            type: 'fluid.table.selfRender',
-                            options: {
-                                selectors: {
-                                    root: '.portlet-list',
-                                },
-                                row: 'portlet:',
-                                rendererOptions: {
-                                    cutpoints: cutpoints,
-                                },
-                            },
-                        },
-                        pagerBar: {
-                            type: 'fluid.pager.pagerBar',
-                            options: {
-                                pageList: {
-                                    type: 'fluid.pager.renderedPageList',
-                                    options: {
-                                        linkBody: 'a',
-                                    },
-                                },
-                            },
-                        },
-                    },
-                    listeners: {
-                        onModelChange: function (newModel, oldModel, pager) {
-                            // Temporary solution. The initDragAndDrop() method call has been wrapped
-                            // within a setTimeout to resolve a fluid.pager bug (i.e. UP-4000). When
-                            // the onModelChange event fires the DOM contained within the pager.container
-                            // element becomes stale. For some reason that is not yet known, the pager's
-                            // internal DOM, within the onModelChange event, is not ready for manipulation.
-                            // This is important because the initDragAndDrop() method needs to apply the jQuery
-                            // UI Draggable plugin to the underlying list items contained within the pager.container.
-                            // With a stale or out-of-sync DOM the list items within the gallery fail to become
-                            // draggable. Wrapping this method call within a setTimeout with the duration set to
-                            // 0 forces the initDragAndDrop() method to be the last JavaScript function executed,
-                            // giving time for the DOM to be redrawn.
-                            var timer = setTimeout(function () {
-                                that.dragManager.initDragAndDrop(
-                                    newModel,
-                                    oldModel,
-                                    pager
-                                );
-                                clearTimeout(timer);
-                            }, 0);
-                        },
-                    },
-                };
-
-                // initialize the pager and set it to 6 items per page.
-                that.state.pager = fluid.pagedTable(
-                    $(container).find('.portlet-results'),
-                    pagerOptions
-                );
-                that.state.pager.events.initiatePageSizeChange.fire(
-                    that.options.pageSize
-                );
-            } // end:if.
-        }; // end:function.
-        that.refresh();
-
-        return that;
-    };
-
-    fluid.defaults('up.AjaxLayoutPortletListView', {
-        dragManager: {
-            type: 'up.LayoutDraggableManager',
-        },
-        selectors: {
-            galleryList: '.portlet-list',
-        },
-        pageSize: 6,
-        defaultIconUrl:
-            '/ResourceServingWebapp/rs/tango/0.8.90/32x32/categories/applications-other.png',
-    });
-
-    up.BrowseContentPane = function (container, overallThat, options) {
-        var that = fluid.initView('up.BrowseContentPane', container, options);
-
-        var initialized = false;
-
-        that.showPane = function () {
-            if (!initialized) {
-                overallThat.showLoading();
-                initialized = true;
-                that.portletBrowser = fluid.initSubcomponent(
-                    that,
-                    'portletBrowser',
-                    [that.locate('pane'), overallThat, fluid.COMPONENT_OPTIONS]
-                );
-            }
-            // show the pane and mark the pane link as active
-            that.locate('pane').show();
-            that.locate('paneLink').addClass('active');
-            that.events.onShow.fire(that);
-        };
-
-        that.hidePane = function () {
-            that.locate('pane').hide();
-            that.locate('paneLink').removeClass('active');
-        };
-
-        that.hidePaneLink = function () {
-            that.locate('pane').hide();
-            that.locate('paneLink').hide().removeClass('active');
-        };
-
-        that.showPaneLink = function () {
-            that.locate('paneLink').show();
-        };
-
-        that.showLoading = function () {
-            that.locate('ui').hide();
-            that.locate('loading').show();
-        };
-
-        that.hideLoading = function () {
-            that.locate('loading').hide();
-            that.locate('ui').show();
-        };
-
-        that.locate('paneLink').click(function () {
-            overallThat.showPane(that.options.key);
-        });
-
-        return that;
-    };
-
-    fluid.defaults('up.BrowseContentPane', {
-        portletBrowser: {
-            type: 'up.PortletBrowser',
-            options: {
-                portletRegistry: {
-                    options: {portletListUrl: 'channel-list.js'},
-                },
-                categoryListView: {
-                    type: 'up.AjaxLayoutCategoryListView',
-                },
-                portletListView: {
-                    type: 'up.AjaxLayoutPortletListView',
-                },
-                listeners: {
-                    onLoad: function (portletBrowser, gallery) {
-                        gallery.hideLoading();
-                    },
-                },
-            },
-        },
-        key: 'add-content',
-        selectors: {
-            pane: '.add-content',
-            paneLink: '.add-content-link',
-            ui: '.content-results-wrapper',
-            loading: '.content-loading',
-
-            portletMenu: '.add-content .categories-column',
-            portletMenuDetail: '.add-content .categories-wrapper',
-            portletListLink: '.add-content .portlet-list-link',
-            portletList: '.add-content .portlet-results',
-        },
-        events: {
-            onInitialize: null,
-            onShow: null,
-        },
-        listeners: {
-            onInitialize: null,
-            onShow: null,
-        },
-    });
-
-    up.PortalGalleryPane = function (container, overallThat, options) {
-        var that;
-        var initialized;
-
-        that = fluid.initView('up.PortalGalleryPane', container, options);
-
-        initialized = false;
-
-        /**
-         * Show this pane.  If the initialization method has not yet been
-         * called, show the loading screen, initialize the pane, and then
-         * hide the loading pane when done.
-         */
-        that.showPane = function () {
-            // if the pane has not yet been initialized, show the loading
-            // screen while we initialize it
-            if (!initialized) {
-                overallThat.showLoading();
-                that.events.onInitialize.fire(that);
-                initialized = true;
-                overallThat.hideLoading();
-            }
-            // show the pane and mark the pane link as active
-            that.locate('pane').show();
-            that.locate('paneLink').addClass('active');
-            that.events.onShow.fire(that);
-        };
-
-        /**
-         * Hide this pane
-         */
-        that.hidePane = function () {
-            that.locate('pane').hide();
-            that.locate('paneLink').removeClass('active');
-        };
-
-        // wire the pane link to display the appropriate pane
-        that.locate('paneLink').click(function () {
-            overallThat.showPane(that.options.key);
-        });
-
-        return that;
-    };
-
-    fluid.defaults('up.PortalGalleryPane', {
-        key: null,
-        selectors: {
-            pane: null,
-            paneLink: null,
-        },
-        events: {
-            onInitialize: null,
-            onShow: null,
-        },
-        listeners: {
-            onInitialize: null,
-            onShow: null,
-        },
-    });
-
-    up.PortalGallery = function (container, options) {
-        var that = fluid.initView('up.PortalGallery', container, options);
-
-        that.panes = [
-            fluid.initSubcomponent(that, 'browseContentPane', [
-                container,
-                that,
-                fluid.COMPONENT_OPTIONS,
-            ]),
-            fluid.initSubcomponent(that, 'useContentPane', [
-                container,
-                that,
-                fluid.COMPONENT_OPTIONS,
-            ]),
-            fluid.initSubcomponent(that, 'skinPane', [
-                container,
-                that,
-                fluid.COMPONENT_OPTIONS,
-            ]),
-            fluid.initSubcomponent(that, 'layoutPane', [
-                container,
-                that,
-                fluid.COMPONENT_OPTIONS,
-            ]),
-        ];
-
-        that.openGallery = function () {
-            that.options.isOpen = true;
-            that.locate('galleryHandle').addClass('handle-arrow-up');
-            that.locate('galleryInner').slideDown(that.options.openSpeed);
-            if (
-                $('#portalPageBodyColumns .portal-page-column').filter(
-                    '.canAddChildren,.up-fragment-admin'
-                )
-            ) {
-                that.showPane('add-content');
-            } else {
-                that.showPane('use-content');
-                that.hidePaneLink('add-content');
-            }
-        };
-
-        that.closeGallery = function () {
-            that.options.isOpen = false;
-            that.locate('galleryHandle').removeClass('handle-arrow-up');
-            that.locate('galleryInner').slideUp(that.options.closeSpeed);
-        };
-
-        that.showPane = function (key) {
-            $(that.panes).each(function (index, pane) {
-                if (pane.options.key === key) {
-                    pane.showPane();
-                } else {
-                    pane.hidePane();
-                }
-            });
-        };
-
-        that.hidePaneLink = function (key) {
-            $(that.panes).each(function (index, pane) {
-                if (pane.options.key === key) {
-                    pane.hidePaneLink();
-                }
-            });
-        };
-
-        that.showPaneLink = function (key) {
-            $(that.panes).each(function (index, pane) {
-                if (pane.options.key === key) {
-                    pane.showPaneLink();
-                }
-            });
-        };
-
-        that.refreshPaneLink = function () {
-            if (
-                $('#portalPageBodyColumns .portal-page-column').filter(
-                    '.canAddChildren,.up-fragment-admin'
-                )
-            ) {
-                that.showPaneLink('add-content');
-            } else {
-                that.hidePaneLink('add-content');
-            }
-        };
-
-        that.showLoading = function () {
-            that.locate('ui').hide();
-            that.locate('loading').show();
-        };
-
-        that.hideLoading = function () {
-            var modal;
-            var ui;
-
-            modal = that.locate('loading');
-            ui = that.locate('ui');
-
-            ui.show();
-            modal.fadeOut('slow');
-        };
-
-        // wire the gallery handle to open and close the gallery panel
-        // as appropriate
-        that.locate('galleryHandle').click(function () {
-            if (that.options.isOpen) {
-                that.closeGallery();
-            } else {
-                that.openGallery();
-            }
-        });
-
-        // wire the configured gallery close link
-        that.locate('closeLink').click(that.closeGallery);
-
-        // if the gallery is configured to initialize as open, open the gallery
-        // before returning
-        if (that.options.isOpen) {
-            that.openGallery();
-        }
-
-        return that;
-    };
-
-    fluid.defaults('up.PortalGallery', {
-        isOpen: false,
-        openSpeed: 500,
-        closeSpeed: 50,
-        browseContentPane: {
-            type: 'up.BrowseContentPane',
-        },
-        useContentPane: {
-            type: 'up.PortalGalleryPane',
-            options: {
-                key: 'use-content',
-                selectors: {
-                    pane: '.use-content',
-                    paneLink: '.use-content-link',
-                },
-                listeners: {
-                    onInitialize: null,
-                },
-            },
-        },
-        skinPane: {
-            type: 'up.PortalGalleryPane',
-            options: {
-                key: 'skin',
-                selectors: {
-                    pane: '.skins',
-                    paneLink: '.skin-link',
-                },
-                listeners: {
-                    onInitialize: null,
-                },
-            },
-        },
-        layoutPane: {
-            type: 'up.PortalGalleryPane',
-            options: {
-                key: 'layout',
-                selectors: {
-                    pane: '.layouts',
-                    paneLink: '.layout-link',
-                },
-                listeners: {
-                    onInitialize: function () {
-                        up.LayoutSelector('.layouts-list', {});
-                    },
-                },
-            },
-        },
-        selectors: {
-            menu: '.menu',
-            galleryInner: '.gallery-inner',
-            galleryHandle: '.handle span',
-            closeLink: '.close-button',
-            loading: '.gallery-loader',
-            ui: '.content-wrapper .content',
-        },
-    });
-})(jQuery, fluid);
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-layout-persistence.js b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-layout-persistence.js
deleted file mode 100644
index 1385fe8d875..00000000000
--- a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-layout-persistence.js
+++ /dev/null
@@ -1,74 +0,0 @@
-/*
- * Licensed to Apereo under one or more contributor license
- * agreements. See the NOTICE file distributed with this work
- * for additional information regarding copyright ownership.
- * Apereo licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file
- * except in compliance with the License.  You may obtain a
- * copy of the License at the following location:
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-var up = up || {};
-
-(function ($, fluid) {
-    /**
-     * Instantiate a LayoutPersistence component
-     *
-     * @param {Object} component Container the element containing the fragment browser
-     * @param {Object} options configuration options for the components
-     */
-    up.LayoutPreferencesPersistence = function (container, options) {
-        // construct the new component
-        var that = fluid.initView(
-            'up.LayoutPreferencesPersistence',
-            container,
-            options
-        );
-
-        that.update = function (data, success) {
-            $.ajax({
-                url: that.options.saveLayoutUrl,
-                type: 'POST',
-                data: data,
-                dataType: 'json',
-                async: false,
-                success: success,
-                error: function (request, text, error) {
-                    that.events.onError.fire(that, request, text, error);
-                },
-            });
-        };
-
-        return that;
-    };
-
-    // defaults
-    fluid.defaults('up.LayoutPreferencesPersistence', {
-        saveLayoutUrl: null,
-        selectors: {
-            errorMessage: '.layout-persistence-error-message',
-        },
-        messages: {
-            error: 'Error persisting layout change',
-        },
-        events: {
-            onSuccess: null,
-            onError: null,
-        },
-        listeners: {
-            onSuccess: null,
-            onError: function (that, request, text, error) {
-                if (console) console.log(request, text, error);
-                that.locate('errorMessage').text(that.options.messages.error);
-            },
-        },
-    });
-})(jQuery, fluid);
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-layout-preferences.js b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-layout-preferences.js
deleted file mode 100644
index af16bc882ca..00000000000
--- a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-layout-preferences.js
+++ /dev/null
@@ -1,824 +0,0 @@
-/*
- * Licensed to Apereo under one or more contributor license
- * agreements. See the NOTICE file distributed with this work
- * for additional information regarding copyright ownership.
- * Apereo licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file
- * except in compliance with the License.  You may obtain a
- * copy of the License at the following location:
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-var uportal = uportal || {};
-
-(function ($, fluid) {
-    var layouts = [
-        {nameKey: 'fullWidth', columns: [100]},
-        {nameKey: 'narrowWide', columns: [40, 60]},
-        {nameKey: 'even', columns: [50, 50]},
-        {nameKey: 'wideNarrow', columns: [60, 40]},
-        {nameKey: 'even', columns: [33, 34, 33]},
-        {nameKey: 'narrowWideNarrow', columns: [25, 50, 25]},
-        {nameKey: 'even', columns: [25, 25, 25, 25]},
-        {nameKey: 'sixColumn', columns: [17, 17, 16, 16, 17, 17]},
-        {nameKey: 'flexTwo', columns: [102]},
-        {nameKey: 'flexThree', columns: [103]},
-        {nameKey: 'flexFour', columns: [104]},
-        {nameKey: 'flexSix', columns: [106]},
-    ];
-
-    /*
-     * A deletable column must either:
-     *   (1) be marked deletable and contain no locked children; or
-     *   (2) be marked up-fragment-admin, indicating the user is the fragment owner
-     */
-    var deletableColumnsSelector =
-        '.deletable:not(:has(.locked)),.up-fragment-admin';
-
-    /*
-     * GENERAL UTILITY METHODS
-     */
-
-    var getActiveTabId = function () {
-        return up.defaultNodeIdExtractor($('#portalNavigationList li.active'));
-    };
-
-    var typeMessage = {
-        ERROR: 'error',
-        WARN: 'warn',
-        SUCCESS: 'success',
-    };
-
-    /*
-     * Diplay messages
-     * msg : should be text
-     * type : should be a css class definition on message div, values are "error", "warn", "success"
-     * callback : should be a function or null
-     */
-    var showMessage = function (message, type, callback) {
-        var messageDiv = $('#portalPageBodyMessage');
-        if (message && type) {
-            var delay = type == typeMessage.ERROR ? 5000 : 2000;
-            if (messageDiv.length > 0) {
-                messageDiv.html('<p>' + message + '</p>');
-                messageDiv
-                    .removeClass()
-                    .addClass(type)
-                    .show()
-                    .delay(delay)
-                    .fadeOut(400, callback);
-            } else return callback;
-        } else {
-            return callback;
-        }
-    };
-
-    /*
-     * LAYOUT COLUMN EDITING FUNCTIONS
-     */
-
-    /**
-     * Return an array representing the currently-chosen layout
-     *
-     * @return layout columns array
-     */
-    var getCurrentLayout = function () {
-        var columns = [];
-
-        // iterate through the CSS classnames for each column and parse
-        // the fl-container-flex classnames to determine the width percentage for
-        // each column
-        $('#portalPageBodyColumns > [id^=column_]').each(function () {
-            var flClass = $(this)
-                .get(0)
-                .className.match('fl-container-flex[0-9]+');
-            if (flClass != null) {
-                columns.push(Number(flClass[0].match('[0-9]+')[0]));
-            }
-        });
-
-        // if no columns were found, indicate that this is a single-column
-        // layout
-        if (columns.length === 0) columns.push(100);
-
-        return columns;
-    };
-
-    /**
-     * Return an array of currently-existing columns which may be deleted.
-     * Deletable columns are calculated based on the column permissions themselves,
-     * as well as the permissions of the columns' contents.
-     *
-     * @return column array
-     */
-    var getDeletableColumns = function () {
-        var columns = $('#portalPageBodyColumns > [id^=column_]');
-        var deletableColumns = columns.filter(deletableColumnsSelector);
-
-        var contentColumns = deletableColumns.filter(
-            ':has(.up-portlet-wrapper)'
-        );
-        if (contentColumns.size() > 0) {
-            var acceptorColumns = columns.filter(
-                '.canAddChildren,.up-fragment-admin'
-            );
-            // if there are no acceptor columns, mark any columns that
-            // have content as undeletable
-            if (acceptorColumns.size() == 0) {
-                deletableColumns = deletableColumns.filter(
-                    ':not(:has(.up-portlet-wrapper))'
-                );
-            }
-        }
-
-        return deletableColumns;
-    };
-
-    var getPermittedLayouts = function () {
-        var canAddColumns = $('#portalNavigation_' + getActiveTabId()).filter(
-            '.canAddChildren,.up-fragment-admin'
-        );
-        var columns = $('#portalPageBodyColumns > [id^=column_]');
-        var deletableColumns = columns.filter(deletableColumnsSelector);
-
-        // set the minimum number of columns according to how
-        // many deletable columns the layout currently contains
-        var minColumns = columns.length - deletableColumns.length;
-
-        var contentColumns = deletableColumns.filter(
-            ':has(.up-portlet-wrapper)'
-        );
-        if (contentColumns.size() > 0) {
-            var acceptorColumns = columns.filter(
-                '.canAddChildren,.up-fragment-admin'
-            );
-            // if there are no acceptor columns, mark any columns that
-            // have content as undeletable
-            if (acceptorColumns.size() == 0) {
-                deletableColumns = deletableColumns.filter(
-                    ':not(:has(.up-portlet-wrapper))'
-                );
-                minColumns = columns.length - deletableColumns.length;
-            } else {
-                var separateAcceptor = false;
-                for (var index = 0; index < acceptorColumns.length; index++) {
-                    if (
-                        $.inArray(acceptorColumns[index], deletableColumns) < 0
-                    ) {
-                        separateAcceptor = true;
-                        break;
-                    }
-                }
-                if (!separateAcceptor) minColumns++;
-            }
-        }
-
-        // set disabled to true for layouts not permitted
-        $(layouts).each(function (index, layout) {
-            var cannotAddColumns =
-                !canAddColumns && layout.columns.length > columns.length;
-            var cannotRemoveColumns = layout.columns.length < minColumns;
-
-            if (cannotAddColumns || cannotRemoveColumns) {
-                layout.disabled = true;
-            }
-        });
-
-        return layouts;
-    };
-
-    var updateColumns = function (layout, that) {
-        var newcolumns = layout.columns;
-        var columnCount = $('#portalPageBodyColumns [id^=column_]').size();
-
-        var post = {
-            action: 'changeColumns',
-            tabId: getActiveTabId(),
-            widths: newcolumns,
-        };
-
-        if (newcolumns.length < columnCount) {
-            var numberToDelete = columnCount - newcolumns.length;
-            var deletables = getDeletableColumns();
-            post.deleted = [];
-            var deletes = [];
-            for (var index = 0; index < numberToDelete; index++) {
-                deletes.push(deletables[deletables.length - index - 1]);
-                post.deleted.push(
-                    up.defaultNodeIdExtractor(
-                        deletables[deletables.length - index - 1]
-                    )
-                );
-            }
-
-            var acceptors = $('#portalPageBodyColumns > [id^=column_]').filter(
-                '.canAddChildren,.up-fragment-admin'
-            );
-            var acceptor = acceptors.filter(':first');
-            post.acceptor = up.defaultNodeIdExtractor(acceptor);
-        }
-
-        that.persistence.update(post, function (data) {
-            // add any new columns to the page
-            $(data.newColumnIds).each(function () {
-                var id = this;
-                var newColumn = $(document.createElement('div'))
-                    .attr('id', 'column_' + id)
-                    .addClass(
-                        'portal-page-column movable deletable editable canAddChildren'
-                    )
-                    .html(
-                        '<div id="inner-column_' +
-                            id +
-                            '" class="portal-page-column-inner"></div>'
-                    );
-                if ($('#portalPageBodyColumns').has('.up-fragment-admin')) {
-                    newColumn.addClass('up-fragment-admin');
-                }
-                $('#portalPageBodyColumns').append(newColumn);
-            });
-
-            // remove any deleted columns from the page
-            $(deletes).each(function () {
-                $(this)
-                    .find('[id^=portlet_]')
-                    .each(function (index, portlet) {
-                        var innerColumn = acceptor.find(
-                            '.portal-page-column-inner'
-                        );
-                        $(portlet).appendTo(innerColumn);
-                    });
-                $(this).remove();
-            });
-
-            // update the widths and CSS classnames for each column
-            // on the page
-            $('#portalPageBodyColumns > [id^=column_]').each(function (index) {
-                // Column Number
-                var column = $(this).removeClass(
-                    'column-1 column-2 column-3 column-4 column-5 column-6'
-                );
-                var columnNumberClass = 'column-' + (index + 1);
-                $(column).addClass(columnNumberClass);
-
-                // Column Width
-                $(this.className.split(' ')).each(function (_, className) {
-                    if (that.options.columnWidthClassPattern.test(className)) {
-                        $(column).removeClass(className);
-                    }
-                });
-                var columnWidthClass = that.options.columnWidthClassFunction(
-                    newcolumns[index]
-                );
-                columnWidthClass && $(column).addClass(columnWidthClass);
-
-                // div.inner-column CSS classes
-                var innerColumn = $(column).find('.portal-page-column-inner');
-                innerColumn.attr('class', 'portal-page-column-inner'); // Reset to minimum
-                var innerColumnClasses =
-                    that.options.innerColumnClassesFunction(newcolumns[index]);
-                innerColumnClasses && innerColumn.addClass(innerColumnClasses);
-            });
-
-            that.components.gallery.refreshPaneLink();
-
-            that.components.portletReorderer.refresh();
-        });
-    };
-
-    /**
-     * Instantiate a LayoutPersistence component
-     *
-     * @param {Object} component Container the element containing the fragment browser
-     * @param {Object} options configuration options for the components
-     */
-    up.LayoutPreferences = function (container, options) {
-        // construct the new component
-        var that = fluid.initView('up.LayoutPreferences', container, options);
-
-        that.persistence = up.LayoutPreferencesPersistence(container, {
-            saveLayoutUrl: that.options.layoutPersistenceUrl,
-            messages: {error: that.options.messages.persistenceError},
-        });
-
-        that.urlProvider = up.UrlProvider(container, {
-            portalContext: that.options.portalContext,
-        });
-
-        that.components = {};
-
-        // initialize the gallery component, if present
-        if (
-            that.options.gallerySelector &&
-            $(that.options.gallerySelector).length > 0
-        ) {
-            that.components.gallery = up.PortalGallery(
-                that.options.gallerySelector,
-                {
-                    // content browsing pane
-                    browseContentPane: {
-                        options: {
-                            // "add stuff" sub-pane
-                            portletBrowser: {
-                                options: {
-                                    portletRegistry: {
-                                        options: {
-                                            portletListUrl:
-                                                that.options.channelRegistryUrl,
-                                        },
-                                    },
-                                    searchView: {
-                                        options: {
-                                            searchInvitationMessage:
-                                                that.options.messages
-                                                    .searchForStuff,
-                                        },
-                                    },
-                                    categoryListView: {
-                                        options: {
-                                            rootCategoryName:
-                                                that.options.messages
-                                                    .allCategories,
-                                        },
-                                    },
-                                    listeners: {
-                                        onPortletSelect: function (
-                                            componentThat,
-                                            portlet
-                                        ) {
-                                            var options;
-                                            var firstChannel;
-
-                                            // set the main options for this persistence
-                                            // request
-                                            options = {
-                                                action: 'addPortlet',
-                                                channelID: portlet.id,
-                                            };
-
-                                            // get the first channel element that's
-                                            // unlocked;  fragment owners may bypass
-                                            // these restrictions
-                                            firstChannel = $(
-                                                '[id^=portlet_].movable,[id^=portlet_].up-fragment-admin'
-                                            ).first();
-
-                                            // if the page has no content just add
-                                            //  the new portlet to the tab
-                                            if (firstChannel.size() == 0) {
-                                                options['elementID'] =
-                                                    getActiveTabId();
-                                            } else {
-                                                // otherwise
-                                                options['elementID'] =
-                                                    up.defaultNodeIdExtractor(
-                                                        firstChannel
-                                                    );
-                                                options['position'] =
-                                                    'insertBefore';
-                                            }
-
-                                            that.persistence.update(
-                                                options,
-                                                function (data) {
-                                                    if (data.error) {
-                                                        showMessage(
-                                                            data.error,
-                                                            typeMessage.ERROR
-                                                        );
-                                                        /* } else if (data.response) {
-                                                    showMessage(data.response, typeMsg.SUCCESS, function(){window.location = that.urlProvider.getTabUrl(getActiveTabId());});
-                                                */
-                                                    } else {
-                                                        window.location =
-                                                            that.urlProvider.getTabUrl(
-                                                                getActiveTabId()
-                                                            );
-                                                    }
-                                                }
-                                            );
-                                        },
-                                        onPortletDrag: function (
-                                            portlet,
-                                            method,
-                                            targetID
-                                        ) {
-                                            // Persist the portlet addition.
-                                            that.persistence.update(
-                                                {
-                                                    action: 'addPortlet',
-                                                    channelID: portlet.id,
-                                                    position: method,
-                                                    elementID: targetID,
-                                                },
-                                                function (xml) {
-                                                    if (xml.error) {
-                                                        showMessage(
-                                                            xml.error,
-                                                            typeMessage.ERROR
-                                                        );
-                                                        /* } else if (data.response) {
-                                                    showMessage(xml.response, typeMsg.SUCCESS, function(){window.location = that.urlProvider.getTabUrl(getActiveTabId());});
-                                                */
-                                                    } else {
-                                                        window.location =
-                                                            that.urlProvider.getTabUrl(
-                                                                getActiveTabId()
-                                                            );
-                                                    }
-                                                }
-                                            );
-                                        },
-                                    },
-                                },
-                            },
-                        },
-                    },
-
-                    // use stuff pane
-                    useContentPane: {
-                        options: {
-                            listeners: {
-                                // add a PortletBrowser to the use content pane
-                                onInitialize: function (overallThat) {
-                                    up.PortletBrowser(
-                                        '.use-content',
-                                        overallThat,
-                                        {
-                                            portletRegistry: {
-                                                options: {
-                                                    portletListUrl:
-                                                        that.options
-                                                            .channelRegistryUrl,
-                                                },
-                                            },
-                                            categoryListView: {
-                                                type: 'up.AjaxLayoutCategoryListView',
-                                                options: {
-                                                    rootCategoryName:
-                                                        that.options.messages
-                                                            .allCategories,
-                                                },
-                                            },
-                                            portletListView: {
-                                                type: 'up.AjaxLayoutPortletListView',
-                                            },
-                                            searchView: {
-                                                options: {
-                                                    searchInvitationMessage:
-                                                        that.options.messages
-                                                            .searchForStuff,
-                                                },
-                                            },
-                                            listeners: {
-                                                // on portlet selection, redirect the
-                                                // browser to the selected portlet's
-                                                // focus URL
-                                                onPortletSelect: function (
-                                                    componentThat,
-                                                    portlet
-                                                ) {
-                                                    window.location =
-                                                        that.urlProvider.getPortletUrl(
-                                                            portlet.fname
-                                                        );
-                                                },
-                                            },
-                                        }
-                                    );
-                                },
-                            },
-                        },
-                    },
-
-                    // colors pane
-                    skinPane: {
-                        options: {
-                            listeners: {
-                                onInitialize: function () {
-                                    // add a SkinSelector component to the skin pane
-                                    up.SkinSelector('.skins', {
-                                        listeners: {
-                                            // when a skin is selected, update the
-                                            // persisted skin choice and reload
-                                            // the page with the new skin
-                                            onSelectSkin: function (skin) {
-                                                that.persistence.update(
-                                                    {
-                                                        action: 'chooseSkin',
-                                                        skinName: skin.key,
-                                                    },
-                                                    function () {
-                                                        window.location =
-                                                            that.urlProvider.getTabUrl(
-                                                                getActiveTabId()
-                                                            );
-                                                    }
-                                                );
-                                            },
-                                        },
-                                        currentSkin: that.options.currentSkin,
-                                        skinListURL:
-                                            that.options.mediaPath +
-                                            '/skinList.xml',
-                                        mediaPath: that.options.mediaPath,
-                                    });
-                                },
-                            },
-                        },
-                    },
-
-                    // layouts pane
-                    layoutPane: {
-                        options: {
-                            listeners: {
-                                onInitialize: function () {
-                                    // add a LayoutSelector component to the
-                                    // layouts pane
-                                    up.LayoutSelector('.layouts-list', {
-                                        currentLayout: getCurrentLayout(),
-                                        layouts: getPermittedLayouts(),
-                                        imagePath:
-                                            that.options.mediaPath +
-                                            '/common/images/',
-                                        listeners: {
-                                            // when a new layout is selected, call
-                                            // the locally-defined column update
-                                            // method
-                                            onLayoutSelect: function (layout) {
-                                                updateColumns(layout, that);
-                                            },
-                                        },
-                                        strings: that.options.messages,
-                                    });
-                                },
-                            },
-                        },
-                    },
-                }
-            );
-        }
-
-        that.components.tabManager = up.TabManager('#portalNavigation', {
-            listeners: {
-                onTabEdit: function (newValue) {
-                    that.persistence.update({
-                        action: 'renameTab',
-                        tabId: getActiveTabId(),
-                        tabName: newValue,
-                    });
-                },
-                onTabRemove: function (anchor) {
-                    if (!confirm(that.options.messages.confirmRemoveTab)) {
-                        return false;
-                    }
-
-                    var li;
-                    var id;
-                    li = anchor.parentNode;
-                    id = up.defaultNodeIdExtractor(li);
-                    that.persistence.update(
-                        {
-                            action: 'removeElement',
-                            elementID: id,
-                        },
-                        function () {
-                            window.location =
-                                that.urlProvider.getPortalHomeUrl();
-                        }
-                    );
-                },
-                onTabAdd: function (tabLabel, columns, tabGroup) {
-                    that.persistence.update(
-                        {
-                            action: 'addTab',
-                            tabName: tabLabel,
-                            widths: columns,
-                            tabGroup: tabGroup,
-                        },
-                        function (data) {
-                            window.location = that.urlProvider.getTabUrl(
-                                data.tabId
-                            );
-                        }
-                    );
-                },
-                onTabMove: function (sourceId, method, elementId, tabPosition) {
-                    that.persistence.update({
-                        action: 'moveTab',
-                        sourceID: sourceId,
-                        method: method,
-                        elementID: elementId,
-                        tabPosition: tabPosition,
-                    });
-                },
-            },
-            tabContext: that.options.tabContext,
-            numberOfPortlets: that.options.numberOfPortlets,
-            addTabLabel: that.options.messages.addTabLabel,
-        });
-
-        // initialize the portlet reorderer
-        // checks to see if chrome toolbars exist on the layout
-        // if so, initialize portlet reorderer
-        if ($('[id*=toolbar_]').length > 0) {
-            that.components.portletReorderer = up.fluid.reorderLayout(
-                '#portalPageBodyColumns',
-                {
-                    selectors: {
-                        columns: '.portal-page-column-inner',
-                        modules: '.up-portlet-wrapper',
-                        lockedModules: '.locked:not(.up-fragment-admin)',
-                        dropWarning: $('#portalDropWarning'),
-                        grabHandle: '[id*=toolbar_] .grab-handle',
-                    },
-                    listeners: {
-                        afterMove: function (movedNode) {
-                            var method = 'insertBefore';
-                            var target = null;
-                            if (
-                                $(movedNode).nextAll('[id^=portlet_]').size() >
-                                0
-                            ) {
-                                target = $(movedNode)
-                                    .nextAll('[id^=portlet_]')
-                                    .get(0);
-                            } else if (
-                                $(movedNode).prevAll('[id^=portlet_]').size() >
-                                0
-                            ) {
-                                target = $(movedNode)
-                                    .prevAll('[id^=portlet_]')
-                                    .get(0);
-                                method = 'appendAfter';
-                            } else {
-                                target = $(movedNode).parent();
-                            }
-
-                            var options = {
-                                action: 'movePortlet',
-                                method: method,
-                                elementID: up.defaultNodeIdExtractor(target),
-                                sourceID: up.defaultNodeIdExtractor(movedNode),
-                            };
-                            var succeeded = false; // default... until we hear otherwise
-                            that.persistence.update(options, function (data) {
-                                if (!data.error) {
-                                    succeeded = true;
-                                }
-                            });
-
-                            if (
-                                !succeeded &&
-                                confirm(that.options.messages.movePortletError)
-                            ) {
-                                location.reload();
-                            }
-
-                            // Now revert the Move Portlet menu item and hide the grab handle
-                            var moveOptionsItem = $(movedNode).find(
-                                '.up-portlet-control.move'
-                            );
-                            moveOptionsItem.text(
-                                moveOptionsItem.attr('data-move-text')
-                            );
-                            $(movedNode)
-                                .find('.up-portlet-titlebar .grab-handle')
-                                .addClass('hidden');
-                        },
-                    },
-                    styles: {
-                        mouseDrag: 'fl-reorderer-movable-dragging-mouse',
-                    },
-                }
-            );
-        }
-
-        // Portlet deletion
-        $('a[id*=removePortlet_]').click(function () {
-            var id = up.defaultNodeIdExtractor(this);
-            if (!confirm(that.options.messages.confirmRemovePortlet)) {
-                return false;
-            }
-            $('#portlet_' + id).remove();
-            $('#portalSubnavLink_' + id).remove();
-            that.persistence.update({action: 'removeElement', elementID: id});
-            return false;
-        });
-
-        return that;
-    };
-
-    // defaults
-    fluid.defaults('up.LayoutPreferences', {
-        tabContext: 'header',
-        numberOfPortlets: 0,
-        portalContext: '/uPortal',
-        layoutPersistenceUrl: '/uPortal/api/layout',
-        channelRegistryUrl: '/uPortal/api/portletList',
-        subscribableTabUrl: '/uPortal/api/subscribableTabs.json',
-        mediaPath: null,
-        currentSkin: null,
-        isFragmentMode: false,
-        gallerySelector: '.up-gallery', // Pass null/false to disable
-        columnWidthClassPattern: 'col-md-',
-        columnWidthClassFunction: function () {
-            console.error(
-                'The columnWidthClassFunction option must be specified.'
-            );
-        },
-        innerColumnClassesFunction: function () {
-            console.error(
-                'The innerColumnClassesFunction option must be specified.'
-            );
-        },
-        messages: {
-            persistenceError: 'Error persisting layout change',
-        },
-    });
-
-    /**
-     * Instantiate a FocusedLayoutPersistence component
-     *
-     * @param {Object} component Container the element containing the fragment browser
-     * @param {Object} options configuration options for the components
-     */
-    up.FocusedLayoutPreferences = function (container, options) {
-        // construct the new component
-        var that = fluid.initView(
-            'up.FocusedLayoutPreferences',
-            container,
-            options
-        );
-
-        that.persistence = up.LayoutPreferencesPersistence(container, {
-            saveLayoutUrl: that.options.layoutPersistenceUrl,
-            messages: {error: that.options.messages.persistenceError},
-        });
-
-        that.urlProvider = up.UrlProvider(container, {
-            portalContext: that.options.portalContext,
-        });
-
-        that.components = {};
-
-        // initialize the focused content adding dialog link
-        $('#focusedContentDialogLink').click(function (event) {
-            event.preventDefault();
-
-            // initialize the dialog
-            $('.focused-content-dialog').dialog({width: 500, modal: true});
-
-            // wire the form to persist portlet addition
-            $('.focused-content-dialog form').submit(function () {
-                var portletId;
-                var tabId;
-                var form;
-
-                // collect form data
-                form = this;
-                portletId = form.portletId.value;
-                tabId = $(form).find('[name=targetTab]:checked').val();
-
-                // persist the portlet addition
-                that.persistence.update(
-                    {
-                        action: 'addPortlet',
-                        channelID: portletId,
-                        position: 'insertBefore',
-                        elementID: tabId,
-                    },
-                    function () {
-                        window.location = that.urlProvider.getTabUrl(tabId);
-                    }
-                );
-                return false;
-            });
-
-            // re-wire the form to open the initialized dialog
-            $(this)
-                .unbind('click')
-                .click(function () {
-                    $('.focused-content-dialog').dialog('open');
-                });
-        });
-
-        return that;
-    };
-
-    // defaults
-    fluid.defaults('up.FocusedLayoutPreferences', {
-        portalContext: '/uPortal',
-        layoutPersistenceUrl: '/uPortal/api/layout',
-        messages: {
-            persistenceError: 'Error persisting layout change',
-        },
-    });
-})(jQuery, fluid);
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-layout-selector.js b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-layout-selector.js
deleted file mode 100644
index 4921c89f63b..00000000000
--- a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-layout-selector.js
+++ /dev/null
@@ -1,181 +0,0 @@
-/*
- * Licensed to Apereo under one or more contributor license
- * agreements. See the NOTICE file distributed with this work
- * for additional information regarding copyright ownership.
- * Apereo licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file
- * except in compliance with the License.  You may obtain a
- * copy of the License at the following location:
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-'use strict';
-var up = up || {};
-
-(function ($, fluid) {
-    var getComponentTree = function (that) {
-        var currentLayoutString;
-        var tree;
-
-        // construct a string representing the current layout
-        currentLayoutString = that.options.currentLayout.join('-');
-
-        tree = {children: []};
-        $(that.options.layouts).each(function (index, layout) {
-            var layoutString = layout.columns.join('-');
-            var classes = '';
-
-            if (layout.columns.join('-') === currentLayoutString) {
-                classes += 'selected';
-            }
-
-            if (layout.disabled) {
-                classes += ' disabled';
-            }
-
-            tree.children.push({
-                ID: 'layoutContainer:',
-                decorators: [{type: 'addClass', classes: classes}],
-                children: [
-                    {
-                        ID: 'layout',
-                    },
-                    {
-                        ID: 'layoutLink',
-                        decorators: [
-                            {
-                                type: 'jQuery',
-                                func: 'click',
-                                args: function () {
-                                    if (!layout.disabled) {
-                                        that.options.currentLayout =
-                                            layout.columns;
-                                        that.refresh();
-                                        that.events.onLayoutSelect.fire(
-                                            layout,
-                                            that
-                                        );
-                                    }
-                                },
-                            },
-                        ],
-                    },
-                    {
-                        ID: 'layoutTitle',
-                        value:
-                            layout.columns.length +
-                            ' ' +
-                            that.options.strings[
-                                layout.columns.length == 1
-                                    ? 'column'
-                                    : 'columns'
-                            ],
-                    },
-                    {
-                        ID: 'layoutDescription',
-                        value: that.options.strings[layout.nameKey],
-                    },
-                    {
-                        ID: 'layoutThumb',
-                        decorators: [
-                            {
-                                type: 'attrs',
-                                attributes: {
-                                    style:
-                                        'background: url(' +
-                                        that.options.imagePath +
-                                        'layout_' +
-                                        layoutString +
-                                        '.svg' +
-                                        ') top left no-repeat;',
-                                },
-                            },
-                        ],
-                    },
-                ],
-            });
-        });
-
-        return tree;
-    };
-
-    up.LayoutSelector = function (container, options) {
-        var that;
-        var cutpoints;
-
-        that = fluid.initView('up.LayoutSelector', container, options);
-
-        cutpoints = [
-            {
-                id: 'layoutContainer:',
-                selector: that.options.selectors.layoutContainer,
-            },
-            {id: 'layout', selector: that.options.selectors.layout},
-            {id: 'layoutLink', selector: that.options.selectors.layoutLink},
-            {id: 'layoutTitle', selector: that.options.selectors.layoutTitle},
-            {
-                id: 'layoutDescription',
-                selector: that.options.selectors.layoutDescription,
-            },
-            {id: 'layoutThumb', selector: that.options.selectors.layoutThumb},
-        ];
-
-        /**
-         * Refresh the rendered skin selector view
-         */
-        that.refresh = function () {
-            var tree = getComponentTree(that);
-            fluid.reRender(that.templates, $(container), tree, {
-                cutpoints: cutpoints,
-            });
-        };
-
-        that.templates = fluid.selfRender(
-            $(container),
-            getComponentTree(that),
-            {
-                cutpoints: cutpoints,
-            }
-        );
-
-        return that;
-    };
-
-    // defaults
-    fluid.defaults('up.LayoutSelector', {
-        currentLayout: [50, 50],
-        strings: {
-            fullWidth: 'Full-width',
-            narrowWide: 'Narrow, wide',
-            even: 'Even',
-            wideNarrow: 'Wide, narrow',
-            narrowWideNarrow: 'Narrow, wide, narrow',
-            column: 'Column',
-            columns: 'Columns',
-            sixColumn: 'Narrow Columns',
-        },
-        layouts: [], // Default is an empty array b/c layouts are filtered by permissions in up-layout-preferences.js
-        imagePath: 'test/',
-        selectors: {
-            layoutContainer: '.layout',
-            layout: '.layout-wrapper',
-            layoutLink: '.layout-link',
-            layoutTitle: '.layout-titlebar',
-            layoutDescription: '.layout-description',
-            layoutThumb: '.layout-thumb',
-        },
-        events: {
-            onLayoutSelect: null,
-        },
-        listeners: {
-            onLayoutSelect: null,
-        },
-    });
-})(jQuery, fluid);
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-parameter-editor.js b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-parameter-editor.js
deleted file mode 100644
index c3913586a84..00000000000
--- a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-parameter-editor.js
+++ /dev/null
@@ -1,267 +0,0 @@
-/*
- * Licensed to Apereo under one or more contributor license
- * agreements. See the NOTICE file distributed with this work
- * for additional information regarding copyright ownership.
- * Apereo licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file
- * except in compliance with the License.  You may obtain a
- * copy of the License at the following location:
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-var up = up || {};
-
-(function ($, fluid) {
-    var getParameterPath = function (name, that) {
-        return (
-            that.options.parameterBindName +
-            "['" +
-            that.options.parameterNamePrefix +
-            name +
-            "'].value"
-        );
-    };
-
-    var getAuxiliaryPath = function (name, that) {
-        return (
-            that.options.auxiliaryBindName +
-            "['" +
-            that.options.parameterNamePrefix +
-            name +
-            "'].value"
-        );
-    };
-
-    /**
-     * Add a new parameter to the table.  This method will add a row to the
-     */
-    var addParameter = function (form, that) {
-        var tr;
-        var td;
-        var name;
-        var parameterPath;
-        var checkbox;
-
-        // get the new parameter name from the form
-        name = $(form).find('input[name=name]').val();
-        parameterPath = getAuxiliaryPath(name, that);
-
-        // create a new row in our parameters table
-        tr = $(document.createElement('tr'));
-
-        // add the parameter name
-        tr.append($(document.createElement('td')).text(name));
-
-        // create a new cell for the parameter value(s) and add it to our new row
-        td = $(document.createElement('td'));
-        tr.append(td);
-
-        // add the parameter value input field
-        if (that.options.multivalued) {
-            // add a link for adding multiple parameter values
-            td.append(
-                $(document.createElement('a'))
-                    .attr('href', 'javascript:;')
-                    .attr('paramName', name)
-                    .addClass(that.options.displayClasses.addValueLink)
-                    .addClass(
-                        that.options.displayClasses.addValueLinkExtraClass
-                    )
-                    .text(that.options.messages.addValue)
-                    .click(function () {
-                        addValue($(this), that);
-                    })
-                    .append('&nbsp;&nbsp;<i class="fa fa-plus-circle"></i>')
-                    .append(
-                        $(document.createElement('input'))
-                            .attr({
-                                name: getParameterPath(name, that),
-                                type: 'text',
-                            })
-                            .addClass(
-                                that.options.displayClasses
-                                    .inputElementExtraClass
-                            )
-                            .hide()
-                    )
-            );
-
-            // add an input field for an initial single value
-            addValue(
-                td.find('.' + that.options.displayClasses.addValueLink),
-                that
-            );
-        } else {
-            td.append(
-                $(document.createElement('input'))
-                    .attr({name: parameterPath, type: 'text'})
-                    .addClass(
-                        that.options.displayClasses.inputElementExtraClass
-                    )
-            );
-        }
-
-        // add the parameter override checkbox
-        if (that.options.useAuxiliaryCheckbox) {
-            checkbox = $(document.createElement('input'))
-                .attr('type', 'checkbox')
-                .attr('name', getAuxiliaryPath(name, that))
-                .val('true');
-            tr.append($(document.createElement('td')).append(checkbox));
-        }
-
-        // add the remove parameter link
-        tr.append(
-            $(document.createElement('td')).append(
-                $(document.createElement('a'))
-                    .text(that.options.messages.removeParameter)
-                    .addClass(that.options.displayClasses.deleteItemLink)
-                    .addClass(
-                        that.options.displayClasses.deleteItemLinkExtraClass
-                    )
-                    .attr('href', 'javascript:;')
-                    .append('&nbsp;&nbsp;<i class="fa fa-trash-o"></i>')
-                    .click(function () {
-                        removeParameter($(this));
-                    })
-            )
-        );
-
-        // append the new row to the table
-        that.locate('preferencesTable').append(tr);
-        that.options.dialog.dialog('close');
-        return false;
-    };
-
-    var removeParameter = function (link) {
-        $(link).parent().parent().remove();
-    };
-
-    var addValue = function (link, that) {
-        var parameterPath;
-
-        link = $(link);
-        parameterPath = getParameterPath(link.attr('paramName'), that);
-        link.before(
-            $(document.createElement('div'))
-                .append(
-                    $(document.createElement('input'))
-                        .attr({name: parameterPath, type: 'text'})
-                        .addClass(
-                            that.options.displayClasses.inputElementExtraClass
-                        )
-                )
-                .append('  ')
-                .append(
-                    $(document.createElement('a'))
-                        .attr('href', 'javascript:;')
-                        .addClass(that.options.displayClasses.deleteValueLink)
-                        .addClass(
-                            that.options.displayClasses
-                                .deleteValueLinkExtraClass
-                        )
-                        .text(that.options.messages.remove)
-                        .append(
-                            '&nbsp;&nbsp;<i class="fa fa-minus-circle"></i>'
-                        )
-                        .click(function () {
-                            removeValue($(this));
-                        })
-                )
-        );
-    };
-
-    var removeValue = function (link) {
-        $(link).parent().remove();
-    };
-
-    /**
-     * Display the parameter adding dialog.  We ask a user to choose a parameter
-     * name so we can appropriately set the name of the new input element.
-     */
-    var showAddParameterDialog = function (that) {
-        var dialog = that.options.dialog;
-        if (that.options.dialogInitialized) {
-            // if the dialog has already been initialized, clear the previous value and open it
-            dialog.find('form').get(0).reset();
-            dialog.dialog('open');
-        } else {
-            // set the dialog form to add the appropriate parameter
-            dialog.find('form').submit(function () {
-                return addParameter(this, that);
-            });
-
-            // open the dialog and mark it as initialized
-            dialog.dialog();
-            that.options.dialogInitialized = true;
-        }
-    };
-
-    up.ParameterEditor = function (container, options) {
-        var that = fluid.initView('up.ParameterEditor', container, options);
-        container = $(container);
-
-        // initialize actions for parameter value adding and deletion
-        container
-            .find('.' + that.options.displayClasses.deleteItemLink)
-            .click(function () {
-                removeParameter(this);
-            });
-        container
-            .find('.' + that.options.displayClasses.deleteValueLink)
-            .click(function () {
-                removeValue(this);
-            });
-        container
-            .find('.' + that.options.displayClasses.addValueLink)
-            .click(function () {
-                addValue(this, that);
-            });
-
-        // initialize the action to add a new parameter
-        container
-            .find('.' + that.options.displayClasses.addItemLink)
-            .click(function () {
-                showAddParameterDialog(that);
-            });
-
-        // prepare the modal form dialog
-        that.options.dialogInitialized = false;
-    };
-
-    // defaults
-    fluid.defaults('up.ParameterEditor', {
-        parameterNamePrefix: '',
-        parameterBindName: '',
-        auxiliaryBindName: '',
-        useAuxiliaryCheckbox: false,
-        dialog: null,
-        multivalued: false,
-        displayClasses: {
-            deleteItemLink: 'delete-parameter-link',
-            deleteItemLinkExtraClass: '',
-            deleteValueLink: 'delete-parameter-value-link',
-            deleteValueLinkExtraClass: '',
-            addItemLink: 'add-parameter-link',
-            addItemLinkExtraClass: '',
-            addValueLink: 'add-parameter-value-link',
-            addValueLinkExtraClass: '',
-            inputElementExtraClass: '',
-        },
-        messages: {
-            remove: 'Remove',
-            removeParameter: 'Delete Preference',
-            addValue: 'Add value',
-        },
-        selectors: {
-            preferencesTable: 'tbody',
-        },
-    });
-})(jQuery, fluid);
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-portlet-browser.js b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-portlet-browser.js
deleted file mode 100644
index 49cb458d0ff..00000000000
--- a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-portlet-browser.js
+++ /dev/null
@@ -1,311 +0,0 @@
-/*
- * Licensed to Apereo under one or more contributor license
- * agreements. See the NOTICE file distributed with this work
- * for additional information regarding copyright ownership.
- * Apereo licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file
- * except in compliance with the License.  You may obtain a
- * copy of the License at the following location:
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-'use strict';
-var up = up || {};
-
-(function ($, fluid) {
-    /**
-     * DefaultPortletSearchView component provides a generic portlet searching
-     * interface to serve as a view subcomponent of PortletBrowser.  This
-     * default implementation makes use of a simple search form and executes
-     * portlet search events as appropriate against the supplied parent component.
-     *
-     * ----------------
-     * Available selectors
-     * ----------------
-     *
-     * portletSearchView
-     *     overall container to be used while performing the Fluid rendering
-     *     operation
-     * searchForm
-     *     portlet search form
-     * searchInput
-     *     portlet search input field.  Must be contained within the search form
-     *
-     * ---------------------------
-     * Other Configuration Options
-     * ---------------------------
-     *
-     * searchInvitationMessage
-     *     default instructional message to be displayed within the search input
-     *     field
-     *
-     * @param {Object} component Container the element containing the fragment browser
-     * @param {Object} parent PortletBrowser component (overall that)
-     * @param {Object} options configuration options for the components
-     */
-    up.DefaultPortletSearchView = function (
-        container,
-        portletBrowser,
-        options
-    ) {
-        var that;
-        var cutpoints;
-        var tree;
-
-        // construct the new component
-        that = fluid.initView(
-            'up.DefaultPortletSearchView',
-            container,
-            options
-        );
-
-        // initialize a state map for this component
-        that.state = {};
-
-        // define the renderer cutpoints based on the configured selectors
-        cutpoints = [
-            {id: 'searchForm', selector: that.options.selectors.searchForm},
-            {id: 'searchInput', selector: that.options.selectors.searchInput},
-        ];
-
-        // generate the component tree
-        tree = {
-            children: [
-                {
-                    ID: 'searchForm',
-                    decorators: [
-                        {
-                            type: 'jQuery',
-                            func: 'submit',
-                            args: function () {
-                                // Upon form submission, fire the portlet search
-                                // event on the parent component
-                                portletBrowser.events.onPortletSearch.fire(
-                                    portletBrowser,
-                                    that.locate('searchInput').val(),
-                                    true
-                                );
-                                return false;
-                            },
-                        },
-                    ],
-                },
-                {
-                    ID: 'searchInput',
-                    value: that.options.searchInvitationMessage,
-                    decorators: [
-                        {
-                            type: 'jQuery',
-                            func: 'keyup',
-                            args: function () {
-                                // As the user updates the search field, fire
-                                // the portlet search event on the parent
-                                // component
-                                portletBrowser.events.onPortletSearch.fire(
-                                    portletBrowser,
-                                    $(this).val(),
-                                    false
-                                );
-                                $('.pager-button-up-inner').click();
-                            },
-                        },
-                        {
-                            type: 'jQuery',
-                            func: 'focus',
-                            args: function () {
-                                // When the search input field is focused, check
-                                // if the input value matches the search
-                                // invitation message.  If it does, clear out
-                                // the input field.
-                                if (
-                                    $(this).val() ===
-                                    that.options.searchInvitationMessage
-                                ) {
-                                    $(this).val('');
-                                }
-                            },
-                        },
-                        {
-                            type: 'jQuery',
-                            func: 'blur',
-                            args: function () {
-                                // When the search input field loses focus, check
-                                // if the input value is empty.  If it is, set
-                                // the value back to the search invitation message.
-
-                                var string_;
-                                string_ = $.trim($(this).val());
-                                if (string_ === '') {
-                                    $(this).val(
-                                        that.options.searchInvitationMessage
-                                    );
-                                }
-                            },
-                        },
-                    ],
-                },
-            ],
-        };
-
-        // render the component
-        that.state.templates = fluid.selfRender(
-            that.locate('portletSearchView'),
-            tree,
-            {cutpoints: cutpoints}
-        );
-
-        return that;
-    };
-
-    // defaults
-    fluid.defaults('up.DefaultPortletSearchView', {
-        searchInvitationMessage: 'Search for stuff',
-        selectors: {
-            portletSearchView: '.portlet-search-view',
-            searchForm: '.portlet-search-form',
-            searchInput: '.portlet-search-input',
-        },
-    });
-
-    /**
-     * PortletBrowser component provides a user interface for viewing and
-     * selecting registered uPortal portlets.  This portlet list is collected from
-     * the configured portlet registry, and a number of view-type subcomponents
-     * govern the browsing, search, and display behaviors of this component.  The
-     * parent component itself delegates all markup generation to the view
-     * subcomponents.
-     *
-     * ----------------
-     * Available events
-     * ----------------
-     *
-     * onLoad
-     *     optional action to be executed after component initialization
-     * onCategorySelect
-     *     called when a user selects a category
-     * onPortletSearch
-     *     called when a user performs a search action
-     * onPortletSelect
-     *     called when a user selects a portlet
-     *
-     * ---------------------------
-     * Other Configuration Options
-     * ---------------------------
-     *
-     * portletListView
-     *       Displays the portlets themselves, potentially filtered by a search
-     *       term or category
-     * categoryListView
-     *       Displays the portlet categories and allows the user to use them as
-     *       filters
-     * searchView
-     *       Displays a search form, allowing the user to search the portlet registry
-     * portletRegistry
-     *       PortletRegistry component
-     *
-     *
-     * @param {Object} component Container the element containing the fragment browser
-     * @param {Object} options configuration options for the components
-     */
-    up.PortletBrowser = function (container, overallThat, options) {
-        // construct the new component
-        var that = fluid.initView('up.PortletBrowser', container, options);
-
-        // initialize the portlet registry subcomponent
-        that.options.portletRegistry.options =
-            that.options.portletRegistry.options || {};
-        that.options.portletRegistry.options.listeners =
-            that.options.portletRegistry.options.listeners || {};
-        that.options.portletRegistry.options.listeners.onLoad = function () {
-            initializePortletBrowser(that, overallThat, container);
-        };
-        that.registry = fluid.initSubcomponent(that, 'portletRegistry', [
-            container,
-            fluid.COMPONENT_OPTIONS,
-        ]);
-
-        // initialize a state map for this component
-        return that;
-    };
-
-    var initializePortletBrowser = function (that, overallThat, container) {
-        // initialize a state map for this component
-        that.state = {};
-
-        // initialize the view subcomponents
-        that.categoryListView = fluid.initSubcomponent(
-            that,
-            'categoryListView',
-            [container, that, fluid.COMPONENT_OPTIONS]
-        );
-        if (that.options['stateListView'] != null) {
-            that.stateListView = fluid.initSubcomponent(that, 'stateListView', [
-                container,
-                that,
-                fluid.COMPONENT_OPTIONS,
-            ]);
-        }
-        that.searchView = fluid.initSubcomponent(that, 'searchView', [
-            container,
-            that,
-            fluid.COMPONENT_OPTIONS,
-        ]);
-        that.portletListView = fluid.initSubcomponent(that, 'portletListView', [
-            container,
-            that,
-            fluid.COMPONENT_OPTIONS,
-        ]);
-
-        // indicate to the caller that the component has been successfully loaded
-        that.events.onLoad.fire(that, overallThat);
-    };
-
-    // defaults
-    fluid.defaults('up.PortletBrowser', {
-        portletRegistry: {
-            type: 'up.PortletRegistry',
-        },
-        searchView: {
-            type: 'up.DefaultPortletSearchView',
-        },
-        events: {
-            onLoad: null,
-            onCategorySelect: null,
-            onStateSelect: null,
-            onPortletSearch: null,
-            onPortletSelect: null,
-            onPortletDrag: null,
-        },
-        listeners: {
-            onLoad: null,
-            onCategorySelect: function (that, category) {
-                that.state.currentCategory = category.id;
-                that.categoryListView.refresh();
-                that.portletListView.refresh();
-            },
-            onStateSelect: function (that, state) {
-                that.state.currentState = state;
-                that.portletListView.refresh();
-            },
-            onPortletSearch: function (that, searchTerm) {
-                searchTerm = $.trim(searchTerm);
-                that.state.portletRegex =
-                    searchTerm.length > 0
-                        ? new RegExp(up.escapeSpecialChars(searchTerm), 'i')
-                        : undefined;
-                that.portletListView.refresh();
-            },
-            onPortletSelect: function (that) {
-                that.portletListView.refresh();
-            },
-            onPortletDrag: null,
-        },
-    });
-})(jQuery, fluid);
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-portlet-registry.js b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-portlet-registry.js
deleted file mode 100644
index 122d0816fe8..00000000000
--- a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-portlet-registry.js
+++ /dev/null
@@ -1,289 +0,0 @@
-/*
- * Licensed to Apereo under one or more contributor license
- * agreements. See the NOTICE file distributed with this work
- * for additional information regarding copyright ownership.
- * Apereo licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file
- * except in compliance with the License.  You may obtain a
- * copy of the License at the following location:
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-'use strict';
-var up = up || {};
-
-/**
- * The PortletRegistry component provides a JavaScript utility for
- * requesting information about registered portlets and portlet
- * categories.
- *
- * Note: All provided information is constrained by the
- * permissions of the currently-authenticated user, and is furthermore
- * constrained by the purpose for which the portlets are requested. For
- * example, the list of portlets returned by a request for manageable
- * portlets will differ from that returned by a request for subscribable
- * portlets.
- *
- * ---------------------------
- * Configuration Options
- * ---------------------------
- *
- * portletListUrl
- *     URL of the portlet registry AJAX service
- * allCategoriesName
- *     Name of the pseudo "All Categories" category
- *
- */
-(function ($, fluid) {
-    /**
-     * Construct a new portlet from the backend-provided JSON.
-     */
-    var Portlet = function (json) {
-        return {
-            id: json.id,
-            description: json.description,
-            fname: json.fname,
-            title: json.title,
-            name: json.name,
-            state: json.state,
-            type: json.typeId,
-            iconUrl: json.iconUrl,
-        };
-    };
-
-    /**
-     * Construct a new category from the backend-provided JSON.
-     */
-    var Category = function (json) {
-        return {
-            id: json.id,
-            name: json.name,
-            description: json.description,
-            categories: [],
-            deepCategories: [],
-            portlets: [],
-            deepPortlets: [],
-        };
-    };
-
-    var processCategory = function (that, category) {
-        // If this category isn't already present in the array,
-        // perform all necessary processing for it and its children,
-        // then return the category
-        if (that.state.categories[category.id]) {
-            // otherwise just return the already-cached category
-            return that.state.categories[category.id];
-        } else {
-            var c = new Category(category);
-
-            // Process each of the member categories.  First add each
-            // category and its deep members to the list of deep members
-            // for this category, then do the same for each of its deep
-            // member portlets.
-            $(category.categories).each(function (index, subCategory) {
-                subCategory = processCategory(that, subCategory);
-
-                c.categories.push(subCategory);
-                c.categories[subCategory.id] = c.categories.at(-1);
-
-                // add the subcategory to the deep categories array
-                if (!c.deepCategories[subCategory.id]) {
-                    c.deepCategories.push(subCategory);
-                    c.deepCategories[subCategory.id] = c.deepCategories.at(-1);
-                }
-
-                // add all deep member categories of this subcategory
-                // to the deep members array
-                $(subCategory.deepCategories).each(function (index, member) {
-                    if (!c.deepCategories[member.id]) {
-                        c.deepCategories.push(member);
-                        c.deepCategories[member.id] = c.deepCategories.at(-1);
-                    }
-                });
-
-                // add all deep member portlets of this subcategory to the
-                // deep members array
-                $(subCategory.deepPortlets).each(function (index, member) {
-                    if (!c.deepPortlets['portlet.' + member.id]) {
-                        c.deepPortlets.push(member);
-                        c.deepPortlets['portlet.' + member.id] =
-                            c.deepPortlets.at(-1);
-                    }
-                });
-            });
-
-            // Process each of the direct member portlets.  First add
-            // each portlet to the cached portlet list, then add it
-            // to the list of deep members for this portlet category.
-            $(category.channels).each(function (index, json) {
-                var portlet = new Portlet(json);
-
-                c.portlets.push(portlet);
-                c.portlets['portlet.' + portlet.id] = c.portlets.at(-1);
-
-                // add the portlet to the cached list
-                if (!that.state.portlets['portlet.' + portlet.id]) {
-                    that.state.portlets.push(portlet);
-                    that.state.portlets['portlet.' + portlet.id] =
-                        that.state.portlets.at(-1);
-                }
-                // add it to the list of deep members
-                if (!c.deepPortlets['portlet.' + portlet.id]) {
-                    c.deepPortlets.push(portlet);
-                    c.deepPortlets['portlet.' + portlet.id] =
-                        that.state.portlets[c.deepPortlets.length - 1];
-                }
-            });
-
-            // add this category to the cached category list
-            that.state.categories.push(c);
-            that.state.categories[c.id] = that.state.categories.at(-1);
-            return c;
-        }
-    };
-
-    var getRegistry = function (that) {
-        $.ajax({
-            url: that.options.portletListUrl,
-            success: function (data) {
-                // add the reported fragments to the state array, indexing
-                // each by fragment owner username to expedite future lookups
-                that.state = that.state || {};
-                that.state.portlets = [];
-                that.state.categories = [];
-
-                $(data.registry.categories).each(function (index, category) {
-                    processCategory(that, category);
-                });
-
-                // Deal with uncategorized channels
-                if (data.registry.channels.length > 0) {
-                    processCategory(that, {
-                        id: 'uncat',
-                        name: 'Uncategorized',
-                        description: 'Uncategorized Channels',
-                        categories: [],
-                        channels: data.registry.channels,
-                    });
-                }
-
-                that.events.onLoad.fire();
-            },
-            dataType: 'json',
-        });
-    };
-
-    /**
-     * Instantiate a PortletRegistry component
-     *
-     * @param {Object} component Container the element containing the fragment browser
-     * @param {Object} options configuration options for the components
-     */
-    up.PortletRegistry = function (container, options) {
-        // construct the new component
-        var that = fluid.initView('up.PortletRegistry', container, options);
-
-        // --------------------------------------------------
-        // PUBLIC METHODS
-        // --------------------------------------------------
-
-        /**
-         * Refresh the cached category and portlet information by
-         * making a fresh request to the backend portlet registry service.
-         */
-        that.refreshRegistry = function () {
-            getRegistry(that);
-        };
-
-        /**
-         * Return the portlet with the specified ID.
-         *
-         * @param id {Number} portlet ID
-         * @return {Object} portlet
-         */
-        that.getPortlet = function (id) {
-            return that.state.portlets['portlet.' + id];
-        };
-
-        /**
-         * Return the category with the specified key.  This key should
-         * be the fully qualified entity key of the format service.id.
-         *
-         * @param key {String} category key
-         */
-        that.getCategory = function (key) {
-            return that.state.categories[key];
-        };
-
-        /**
-         * Return an array of all portlets belonging to the category
-         * with the specified key.
-         *
-         * @param key {String} category key
-         * @param deepMembers {boolean} <code>true</code> to return all
-         *          deep member portlets of the specified category, and
-         *          <code>false</code> for solely the direct members
-         */
-        that.getMemberPortlets = function (key, deepMembers) {
-            return deepMembers
-                ? that.state.categories[key].deepPortlets
-                : that.state.categories[key].portlets;
-        };
-
-        /**
-         * Return an array of all categories belonging to the category
-         * with the specified key.
-         *
-         * @param key {String} category key
-         * @param deepMembers {boolean} <code>true</code> to return all
-         *           deep member categories of the specified category, and
-         *           <code>false</code> for solely the direct members
-         */
-        that.getMemberCategories = function (key, deepMembers) {
-            return deepMembers
-                ? that.state.categories[key].deepCategories
-                : that.state.categories[key].categories;
-        };
-
-        /**
-         * Return an array of all categories retrieved for the current
-         * portlet registry request.
-         */
-        that.getAllCategories = function () {
-            return that.state.categories;
-        };
-
-        /**
-         * Return an array of all portlets retrieved for the current
-         * portlet registry request.
-         */
-        that.getAllPortlets = function () {
-            return that.state.portlets;
-        };
-
-        // request the portlet registry from the back-end service and
-        // parse it as required by this component
-        getRegistry(that);
-
-        return that;
-    };
-
-    // defaults
-    fluid.defaults('up.PortletRegistry', {
-        portletListUrl: null,
-        allCategoriesName: 'All',
-        events: {
-            onLoad: null,
-        },
-        listeners: {
-            onLoad: null,
-        },
-    });
-})(jQuery, fluid);
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-rating-option.js b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-rating-option.js
deleted file mode 100644
index 7b89b54f896..00000000000
--- a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-rating-option.js
+++ /dev/null
@@ -1,174 +0,0 @@
-/*
- * Licensed to Apereo under one or more contributor license
- * agreements. See the NOTICE file distributed with this work
- * for additional information regarding copyright ownership.
- * Apereo licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file
- * except in compliance with the License.  You may obtain a
- * copy of the License at the following location:
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-var up = up || {};
-
-(function ($) {
-    up.notify = function (messageText, messageLayout, messageType) {
-        $('#up-notification').noty({
-            text: messageText,
-            layout: messageLayout,
-            type: messageType,
-        });
-    };
-
-    $.fn.createRatingModal = function () {
-        var that = this;
-        var modalTitle = [
-            '<h4 class="modal-title" style="white-space: nowrap"><strong>',
-            $(this).data('title'),
-            '</strong></h4>',
-        ].join('');
-        var modalHeader = [
-            '<div class="modal-header">',
-            modalTitle,
-            '</div>',
-        ].join('');
-
-        // Instructions defaults to no text; text injected by JavaScript on ratings load and save.
-        var instructions = ['<div class="help-block ratingModalInstruct"/>'];
-        var starRating = [
-            '<input type="number" data-max="5" data-min="1" value="0" data-readonly="false" ' +
-                'data-empty-value="0" class="ratingModalInput"/>',
-        ];
-        var modalBody = [
-            '<div class="modal-body style="font-size:2em; white-space:nowrap;">',
-            instructions,
-            starRating,
-            '</div>',
-        ].join('');
-
-        var closeButton = [
-            ' <button type="button" class="btn btn-default" data-dismiss="modal">',
-            $(this).data('close.button.label'),
-            '</button>',
-        ].join('');
-        var saveButton = [
-            '<button type="button" class="btn btn-primary ratingModalSaveButton disabled">',
-            $(this).data('save.button.label'),
-            '</button>',
-        ].join('');
-        var modalFooter = [
-            '<div class="modal-footer">',
-            closeButton,
-            saveButton,
-            '</div>',
-        ].join('');
-        var modalContent = [
-            '<div class="modal-content" style="display:inline-block">',
-            modalHeader,
-            modalBody,
-            modalFooter,
-            '</div>',
-        ].join('');
-        var modalDialog = [
-            '<div class="modal-dialog ratePortletModal-dialog{@ID}" style="text-align:center; position:static">',
-            modalContent,
-            '</div>',
-        ].join('');
-        $(this).append(modalDialog);
-        $(this).modal('hide');
-        $(this)
-            .find('.ratingModalSaveButton')
-            .click(function () {
-                var portletRating = $(that).find('input').val();
-                var saveUrl = $(that).data('saveurl');
-                $.ajax({
-                    url: saveUrl,
-                    data: {rating: portletRating},
-                    type: 'POST',
-                    success: function () {
-                        // hide the modal first to prevent flicker on updating the instructions in the modal
-                        $(that).modal('hide');
-                        up.notify(
-                            $(that).data('rating.save.successful'),
-                            'TopCenter',
-                            'success'
-                        );
-                        // delay adjusting instructions to afford time for the modal to have actually hidden first
-                        setTimeout(function () {
-                            $(that)
-                                .find('.ratingModalInstruct')
-                                .text(
-                                    $(that).data('rating.instructions.rated')
-                                );
-                        }, 1000);
-                    },
-                    error: function () {
-                        // Dismiss the modal even on error.
-                        $(that).modal('hide');
-                        up.notify(
-                            $(that).data('rating.save.unsuccessful'),
-                            'TopCenter',
-                            'error'
-                        );
-                    },
-                });
-            });
-        $(this).on('show.bs.modal', function () {
-            $(that).find('.ratingModalSaveButton').addClass('disabled');
-            var getUrl = $(that).data('geturl');
-            $.ajax({
-                url: getUrl,
-                type: 'GET',
-                cache: false,
-                dataType: 'json',
-                contentType: 'application/json; charset=utf-8',
-                success: function (data) {
-                    if (data.rating === null) {
-                        $(that).find('input').val(0);
-                        $(that).find('input').redraw(0);
-                        $(that)
-                            .find('.ratingModalInstruct')
-                            .text($(that).data('rating.instructions.unrated'));
-                    } else {
-                        $(that)
-                            .find('.ratingModalSaveButton')
-                            .removeClass('disabled');
-                        $(that).find('input').val(data.rating);
-                        $(that).find('input').redraw(data.rating);
-                        $(that)
-                            .find('.ratingModalInstruct')
-                            .text($(that).data('rating.instructions.rated'));
-                    }
-                },
-                error: function () {
-                    up.notify(
-                        $(that).data('get.rating.unsucessful'),
-                        'TopCenter',
-                        'error'
-                    );
-                },
-            });
-            $(that).find('.modal-dialog').css('transform', 'translate(0, 50%)');
-            $(that)
-                .find('.modal-dialog')
-                .css('-ms-transform', 'translate(0, 50%)'); // IE 9
-            $(that)
-                .find('.modal-dialog')
-                .css('-webkit-transform', 'translate(0, 50%)'); // Safari and Chrome
-            $(that)
-                .find('input')
-                .change(function () {
-                    $(that)
-                        .find('.ratingModalSaveButton')
-                        .removeClass('disabled');
-                });
-        });
-    };
-})(jQuery);
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-showHideToggle.js b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-showHideToggle.js
deleted file mode 100644
index 36e7d30d913..00000000000
--- a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-showHideToggle.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/*
- * Licensed to Apereo under one or more contributor license
- * agreements. See the NOTICE file distributed with this work
- * for additional information regarding copyright ownership.
- * Apereo licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file
- * except in compliance with the License.  You may obtain a
- * copy of the License at the following location:
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-var up = up || {};
-
-(function ($, fluid) {
-    var initialHide = function (that) {
-        $(that.locate('stacktracediv')).hide();
-    };
-
-    var addToggle = function (that) {
-        var toggleHandle = $(that.locate('stacktracetoggle'));
-        var stacktracediv = $(that.locate('stacktracediv'));
-        var hideMesg = that.options.hidemessage;
-        var showMesg = that.options.showmessage;
-        toggleHandle.toggle(
-            function () {
-                stacktracediv.show('fast', function () {
-                    toggleHandle.text(hideMesg);
-                });
-            },
-            function () {
-                stacktracediv.hide('fast', function () {
-                    toggleHandle.text(showMesg);
-                });
-            }
-        );
-    };
-
-    up.showHideToggle = function (container, options) {
-        var that = fluid.initView('up.showHideToggle', container, options);
-
-        initialHide(that);
-        addToggle(that);
-
-        return that;
-    };
-
-    fluid.defaults('up.showHideToggle', {
-        showmessage: 'Show Stack Trace',
-        hidemessage: 'Hide Stack Trace',
-        selectors: {
-            stacktracediv: '.stacktrace',
-            stacktracetoggle: '.stacktracetoggle',
-        },
-    });
-})(jQuery, fluid);
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-skin-selector.js b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-skin-selector.js
deleted file mode 100644
index 29a2c9a927c..00000000000
--- a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-skin-selector.js
+++ /dev/null
@@ -1,370 +0,0 @@
-/*
- * Licensed to Apereo under one or more contributor license
- * agreements. See the NOTICE file distributed with this work
- * for additional information regarding copyright ownership.
- * Apereo licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file
- * except in compliance with the License.  You may obtain a
- * copy of the License at the following location:
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-/**
- * The SkinSelector component houses the uPortal skin selection functionality and works
- * with a jQuery UI Dialog configured in the initializeSkinMenu() function, which lives
- * in the ajax-preferences-jquery.js file. A list of available skins is obtained through
- * an ajax GET request, which retrieves the skinList.xml file. The skinList.xml file is
- * parsed and a list of skins is dynamically generated and added to the associated
- * jQuery UI Dialog.
- *
- * -------------------
- * Available selectors
- * -------------------
- *
- * skinList
- *         :Reference to the .skin-list DOM container that houses the list of available skins
- *          dynamically created from parsing the skinList.xml file.
- *
- * listItem
- *         :Reference to <li> DOM container with .list-item class name, which is housed under
- *          the <ul class="skin-list"> container.
- *
- * skinWidget
- *         :Reference to <div> DOM container with the .fl-widget class name, which is housed under
- *          the <ul class="skin-list"> container.
- *
- * skinName
- *         :Reference to <h2> DOM container with the .skin-name class name, which is housed in the
- *          <ul class="skin-list"> container.
- *
- * skinThumbnail
- *         :Reference to <img> DOM container with the .skin-thumbnail class name, which is housed
- *          under the <ul class="skin-list"> container.
- *
- * ----------------
- * Available events
- * ----------------
- *
- * onSelectSkin
- *         :Fired when a user "clicks" on a skin rendered to end users.
- *
- * ---------------------------
- * Other Configuration Options
- * ---------------------------
- *
- * currentSkin
- *         :Reference to the currently selected skin.
- *
- * skinListURL
- *         :URL utilized in ajax GET request to retrieve the skinList.xml file.
- *
- * mediaPath
- *         :Reference to src attribute value for skin thumbnails.
- *
- * activeSkin
- *         :Reference to .skin-active class name. The .skin-active class name is applied to the
- *          currently selected skin in the list of skins rendered to end users.
- */
-
-'use strict';
-var up = up || {};
-
-(function ($, fluid) {
-    /**
-     * Private. Builds and returns dataModel object based upon parsed
-     * skinList.xml values.
-     *
-     * @param {String} key - references the value of the <skin-key> node, found within the skinList.xml file.
-     * @param {String} name - references the value of the <skin-name> node, found within the skinList.xml file.
-     * @param {String} description - references the value of the <skin-description> node, found within the skinList.xml file.
-     * @param {String} thumbnailPath - references the media path to the skin's thumbnail image.
-     */
-    var buildDataModel = function (key, name, description, thumbnailPath) {
-        return {
-            key: key,
-            name: name,
-            description: description,
-            thumbnailPath: thumbnailPath,
-            thumbnailAlt: name + ' Thumbnail',
-        };
-    }; // end:function.
-
-    /**
-     * Private. Build the cutpoints array, which defines renderer IDs
-     * for each HTML element that will be rendered.
-     *
-     * @param {Object} that - reference to up.SkinSelector component.
-     */
-    var buildCutPoints = function (that) {
-        return [
-            {id: 'listItem-row:', selector: that.options.selectors.listItem},
-            {id: 'skinWrapper', selector: that.options.selectors.skinWrapper},
-            {id: 'skinLink', selector: that.options.selectors.skinLink},
-            {id: 'skinName', selector: that.options.selectors.skinName},
-            {
-                id: 'skinThumbnail',
-                selector: that.options.selectors.skinThumbnail,
-            },
-        ];
-    }; // end:function.
-
-    /**
-     * Private. Build skin list component subtree.
-     *
-     * @param {Object} that - reference to up.SkinSelector component.
-     */
-    var buildSkinListTree = function (that) {
-        var skinRows;
-
-        skinRows = fluid.transform(that.state.model, function (object) {
-            return {
-                ID: 'listItem-row:',
-                decorators: [
-                    {
-                        type: 'addClass',
-                        classes:
-                            object.key === that.options.currentSkin
-                                ? that.options.activeSkin
-                                : '',
-                    },
-                ],
-                children: [
-                    {
-                        ID: 'skinWrapper',
-                    },
-                    {
-                        ID: 'skinLink',
-                        decorators: [
-                            {
-                                type: 'jQuery',
-                                func: 'click',
-                                args: function () {
-                                    var skinList;
-                                    var li;
-
-                                    // Remove 'skin-active' class from previous.
-                                    skinList = that.locate('skinList');
-                                    skinList
-                                        .find('.' + that.options.activeSkin)
-                                        .removeClass(that.options.activeSkin);
-
-                                    // Apply 'skin-active' class to current.
-                                    li = $(this);
-                                    li.addClass(that.options.activeSkin);
-
-                                    // Fire onSelectSkin event.
-                                    that.events.onSelectSkin.fire(object);
-                                },
-                            },
-                        ],
-                    },
-                    {
-                        ID: 'skinName',
-                        value: object.name,
-                        decorators: [
-                            {
-                                type: 'attrs',
-                                attributes: {
-                                    title: object.name,
-                                },
-                            },
-                        ],
-                    },
-                    {
-                        ID: 'skinThumbnail',
-                        decorators: [
-                            {
-                                type: 'attrs',
-                                attributes: {
-                                    style:
-                                        'background: url(' +
-                                        object.thumbnailPath +
-                                        ') top left no-repeat;',
-                                },
-                            },
-                        ],
-                    },
-                ],
-            };
-        });
-        return skinRows;
-    }; // end:function.
-
-    /**
-     * Private. Builds component tree utilized by the fluid.renderer component.
-     *
-     * @param {Object} that - reference to up.SkinSelector component.
-     */
-    var buildComponentTree = function (that) {
-        return {
-            children: buildSkinListTree(that),
-        };
-    }; // end:function.
-
-    /**
-     * Private. Configues & executes the fluid.renderer component.
-     *
-     * @param {Object} that - reference to up.SkinSelector component.
-     */
-    var doRender = function (that) {
-        var skinList;
-        var options;
-
-        skinList = that.locate('skinList');
-        options = {
-            cutpoints: buildCutPoints(that),
-            model: that.state.model,
-            autoBind: true,
-        };
-
-        // Run renderer.
-        that.state.templates = fluid.selfRender(
-            skinList,
-            buildComponentTree(that),
-            options
-        );
-
-        // Highlight active skin.
-        skinList
-            .find('input[value="' + that.options.currentSkin + '"]')
-            .parents('.widget')
-            .addClass(that.options.activeSkin);
-    }; // end:function.
-
-    /**
-     * Private. Parses the skinList.xml file, which is located in following directory: trunk/uportal-war/src/main/webapp/media/skins/universality
-     * Once parsed, this function extracts meta data for each <skin> defined in the skinList.xml file and constructs a data model through
-     * the buildDataModel() function. Once built, the doRender() function is called, which houses the fluid.renderer implemenentation.
-     *
-     * @param {Object} that - reference to up.SkinSelector component.
-     */
-    var parseSkinListXML = function (that) {
-        // Obtain skinList.xml.
-        $.ajax({
-            url: that.options.skinListURL,
-            async: true,
-            dataType: 'xml',
-            type: 'GET',
-            success: function (xml) {
-                var root;
-                var skinNodes;
-
-                root = $(xml);
-                skinNodes = root.find('skin');
-
-                // Parse skinList.xml & construct ui.
-                $.each(skinNodes, function (index, object) {
-                    var skin;
-                    var key;
-                    var name;
-                    var description;
-                    var thumbnailPath;
-
-                    skin = $(object);
-                    key = skin.children('skin-key').text();
-                    name = skin.children('skin-name').text();
-                    description = skin.children('skin-description').text();
-                    thumbnailPath =
-                        that.options.mediaPath + '/' + key + '/' + 'thumb.gif';
-
-                    // Build data model.
-                    that.state.model.push(
-                        buildDataModel(key, name, description, thumbnailPath)
-                    );
-                }); // end:loop.
-
-                // Render UI.
-                doRender(that);
-            },
-            error: function (XMLHttpRequest, textStatus, errorThrown) {
-                if (console) {
-                    console.log(
-                        'AJAX Failure:',
-                        XMLHttpRequest,
-                        textStatus,
-                        errorThrown
-                    );
-                }
-            },
-        });
-    }; // end:function.
-
-    /**
-     * Private. Entry point for the SkinSelector component. Prepares UI
-     * for SkinSelector component. This function calls the parseSkinListXML()
-     * function and suppresses the submit event for the SkinSelector form.
-     *
-     * @param {Object} that - reference to up.SkinSelector component.
-     */
-    var initialize = function (that) {
-        // Initialize state map & model array.
-        that.state = {};
-        that.state.model = [];
-
-        // Parse skinList.xml
-        parseSkinListXML(that);
-    }; // end:function.
-
-    /**
-     * SkinSelector creator function for the SkinSelector component.
-     *
-     * @param {Object} container - reference to HTML DOM element by ID.
-     * @param {Object} options - reference to object containing all configurations.
-     */
-    up.SkinSelector = function (container, options) {
-        var that;
-        that = fluid.initView('up.SkinSelector', container, options);
-
-        /**
-         * Refresh.
-         */
-        that.refresh = function () {
-            var options;
-
-            options = {
-                cutpoints: buildCutPoints(that),
-                model: that.state.model,
-                autoBind: true,
-            };
-            fluid.reRender(
-                that.state.templates,
-                that.locate('skinList'),
-                buildComponentTree(that),
-                options
-            );
-        };
-
-        // Run initialization.
-        initialize(that);
-        return that;
-    }; // end:component.
-
-    /**
-     * SkinSelector
-     * Defaults function for the SkinSelector component.
-     ---------------------------------*/
-    fluid.defaults('up.SkinSelector', {
-        selectors: {
-            skinList: '.skins-list',
-            listItem: '.skin',
-            skinWrapper: '.skins-wrapper',
-            skinLink: '.skin-link',
-            skinName: '.skin-titlebar',
-            skinThumbnail: '.skin-thumb',
-        },
-        events: {
-            onSelectSkin: null,
-        },
-        currentSkin: null,
-        skinListURL: null,
-        mediaPath: null,
-        activeSkin: 'selected',
-    });
-})(jQuery, fluid);
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-tab-manager.js b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-tab-manager.js
deleted file mode 100644
index c74be41baf1..00000000000
--- a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-tab-manager.js
+++ /dev/null
@@ -1,445 +0,0 @@
-/*
- * Licensed to Apereo under one or more contributor license
- * agreements. See the NOTICE file distributed with this work
- * for additional information regarding copyright ownership.
- * Apereo licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file
- * except in compliance with the License.  You may obtain a
- * copy of the License at the following location:
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-/**
- * The TabManger component houses the tab renaming functionality. This
- * component is a custom wrapper for the fluid simple text inline editor component.
- * The TabManger component is most likely a temporary solution as wrapping the
- * the fluid simple text inline editor component is somewhat overkill. As work continues
- * on enhancing uPortal's Tab management, the TabManger component will most likely
- * be renamed to house forthcoming tab management features.
- *
- * For more information on planned tab management options, please see the below url:
- * https://wiki.jasig.org/display/UPC/Manage+Tabs
- *
- * -------------------
- * Available selectors
- * -------------------
- *
- * ----------------
- * Available events
- * ----------------
- *
- * ---------------------------
- * Other Configuration Options
- * ---------------------------
- *
- */
-
-'use strict';
-var up = up || {};
-
-(function ($, fluid) {
-    /**
-     * Set up the edit container and append the edit field to the container.  If an edit container
-     * is not provided, default markup is created.
-     *
-     * @param {Object} displayContainer The display mode container
-     * @param {Object} editField The edit field that is to be appended to the edit container
-     * @param {Object} editContainer The edit container markup provided by the integrator
-     *
-     * @return eContainer The edit container containing the edit field
-     */
-    fluid.inlineEdit.setupEditContainer = function (
-        displayContainer,
-        editField,
-        editContainer
-    ) {
-        // eslint-disable-next-line unicorn/prevent-abbreviations
-        var eContainer = $(editContainer);
-        eContainer =
-            eContainer.length > 0
-                ? eContainer
-                : $("<div class='fl-inlineEditContainer'></div>");
-        displayContainer.parent().after(eContainer);
-        eContainer.append(editField);
-
-        return eContainer;
-    };
-
-    /**
-     * Set up the textEditButton. Append a background image with appropriate
-     * descriptive text to the button.
-     *
-     * @return {jQuery} The accessible button located after the display text
-     */
-    fluid.inlineEdit.setupTextEditButton = function (that) {
-        var options = that.options;
-        var textEditButton = that.locate('textEditButton');
-
-        if (textEditButton.length === 0) {
-            var markup = $(
-                "<span class='flc-inlineEdit-textEditButton'></span>"
-            );
-            markup.addClass(options.styles.textEditButton);
-
-            /**
-             * Set text for the button and listen
-             * for modelChanged to keep it updated
-             */
-
-            fluid.inlineEdit.updateTextEditButton(
-                markup,
-                that.model.value || options.defaultViewText,
-                options.strings.textEditButton
-            );
-            that.events.modelChanged.addListener(function () {
-                fluid.inlineEdit.updateTextEditButton(
-                    markup,
-                    that.model.value || options.defaultViewText,
-                    options.strings.textEditButton
-                );
-            });
-
-            that.locate('text').after(markup);
-
-            // Refresh the textEditButton with the newly appended options
-            textEditButton = that.locate('textEditButton');
-        }
-        return textEditButton;
-    };
-
-    /**
-     * Private. Initializes the fluid.inlineEditor component to be used with
-     * the active portal tab, as long as the active tab is editable.
-     *
-     * @param {Object} that- reference to an instance of the TabManger component.
-     */
-    var editTabHandler = function (that) {
-        var edit;
-        var remove;
-        var text;
-        var gripper;
-        var numberOfPortlets;
-
-        // Cache DOM elements.
-        edit = that.locate('edit');
-        remove = that.locate('remove');
-        gripper = that.locate('grabHandle');
-
-        if (edit.length > 0) {
-            // Initialize & configure fluid.inlineEdit component.
-            that.inlineEditor = fluid.inlineEdits(that.container, {
-                selectors: {
-                    text: that.options.selectors.text,
-                    edit: that.options.selectors.edit,
-                },
-                listeners: {
-                    afterBeginEdit: function () {
-                        // Hide gripper & remove icon.
-                        remove.hide();
-                        gripper.hide();
-                        edit.hide();
-                    },
-                    afterFinishEdit: function (
-                        newValue,
-                        oldValue,
-                        editNode,
-                        viewNode
-                    ) {
-                        // Show gripper & remove icon.
-                        remove.show();
-                        gripper.filter('.active').show();
-                        edit.show();
-
-                        // Fire afterFinishEdit event.
-                        that.events.onTabEdit.fire(
-                            newValue,
-                            oldValue,
-                            editNode,
-                            viewNode
-                        );
-                    },
-                },
-                submitOnEnter: that.options.submitOnEnter,
-                useTooltip: false,
-            });
-
-            // Mouseenter event listener. Give focus to the
-            // tab name on mouseenter. The mouseenter event
-            // only triggers its handler on the element to which
-            // it is bound.
-            text = that.locate('text');
-            text.bind('mouseenter', function () {
-                text.css('cursor', 'text');
-                text.focus();
-            });
-
-            // Mouseleave event listener. Remove focus from
-            // the tab name on mouseleave. The mouseleave event
-            // only triggers its handler on the element to which
-            // it is bound.
-            text.bind('mouseleave', function () {
-                text.css('cursor', 'pointer');
-                text.blur();
-            });
-
-            // Trigger edit mode.
-            numberOfPortlets = Number.parseInt(that.options.numberOfPortlets);
-            if (
-                numberOfPortlets === 0 &&
-                text.text() === that.options.addTabLabel
-            ) {
-                text.trigger('click');
-            } // end:if.
-        } // end:if.
-    }; // end:function.
-
-    /**
-     * Private. Fires the onRemove event when the 'remove' icon is clicked. Passes a
-     * reference to the onRemove listener.
-     *
-     * @param {Object} that- reference to an instance of the TabManger component.
-     */
-    var removeTabHandler = function (that) {
-        var remove;
-        remove = that.locate('remove');
-        remove.bind('click', function () {
-            that.events.onTabRemove.fire(this);
-        });
-    }; // end: function.
-
-    /**
-     * Private. Fires the onAddTab event when the 'Add Tab' link is clicked. Passes new
-     * tab configurations to the onAddTab listener.
-     *
-     * @param {Object} that- reference to an instance of the TabManger component.
-     */
-    var addTabHandler = function (that) {
-        var add;
-        var tabGroup;
-        add = that.locate('add');
-        tabGroup = that.container.find(that.options.selectors.tabGroup).text();
-        add.bind('click', function () {
-            that.events.onTabAdd.fire(
-                that.options.addTabLabel,
-                that.options.addTabWidths,
-                tabGroup
-            );
-        });
-    }; // end: function.
-
-    /**
-     * Private. Initializes & configures the fluid.reorderLayout component
-     * based upon the TabManager options.
-     *
-     * @param {Object} that- reference to an instance of the TabManger component.
-     */
-    var moveTabHandler = function (that) {
-        // Initialize & configure fluid.reorderLayout component.
-        that.reorderLayout = fluid.reorderLayout(that.container, {
-            selectors: {
-                columns: that.options.selectors.columns,
-                modules: that.options.selectors.modules,
-                lockedModules: that.options.selectors.lockedModules,
-                grabHandle:
-                    that.options.tabContext === 'header'
-                        ? that.options.selectors.grabHandle
-                        : '',
-            },
-            styles: {
-                defaultStyle:
-                    'fl-reorderer-' +
-                    that.options.tabContext +
-                    '-movable-default',
-                selected:
-                    'fl-reorderer-' +
-                    that.options.tabContext +
-                    '-movable-selected',
-                dragging:
-                    'fl-reorderer-' +
-                    that.options.tabContext +
-                    '-movable-dragging',
-                mouseDrag:
-                    'fl-reorderer-' +
-                    that.options.tabContext +
-                    '-movable-dragging',
-                hover:
-                    'fl-reorderer-' +
-                    that.options.tabContext +
-                    '-movable-hover',
-                dropMarker:
-                    'fl-reorderer-' + that.options.tabContext + '-dropMarker',
-                avatar: 'fl-reorderer-' + that.options.tabContext + '-avatar',
-            },
-            listeners: {
-                afterMove: function (item) {
-                    var tab;
-                    var tabShortId;
-                    var method;
-                    var targetTabShortId;
-                    var tabPosition;
-                    var listItems;
-
-                    // Capture moved tab & set defaults.
-                    tab = $(item);
-                    tabShortId = up.defaultNodeIdExtractor(tab);
-                    method = that.options.insertBefore;
-                    targetTabShortId = null;
-                    tabPosition = 1;
-                    listItems = that.locate('tabListItems');
-
-                    // Determine when tab is the last tab and
-                    // calculate the targetTabShortId.
-                    if (tab.is(':last-child')) {
-                        method = that.options.appendAfter;
-                        targetTabShortId = tab.prev().attr('id').split('_')[1];
-                    } else {
-                        targetTabShortId = tab.next().attr('id').split('_')[1];
-                    } // end:if.
-
-                    // Calculate tab position and apply styles based upon
-                    // tab position.
-                    $.each(listItems, function (index, object) {
-                        var li = $(object);
-
-                        // Find position of moved item.
-                        if (li.attr('id') === tab.attr('id')) {
-                            tabPosition = index + 1;
-                        } // end:if.
-
-                        if (listItems.length === 1) {
-                            // Apply & remove styles for a single tab.
-                            li.removeClass(that.options.styles.firstTab)
-                                .removeClass(that.options.styles.lastTab)
-                                .addClass(that.options.styles.singleTab);
-                        } else if (index === 0) {
-                            // Apply & remove styles for the first tab.
-                            li.removeClass(that.options.styles.singleTab)
-                                .removeClass(that.options.styles.lastTab)
-                                .addClass(that.options.styles.firstTab);
-                        } else if (index === listItems.length - 1) {
-                            // Apply & remove styles for the last tab.
-                            li.removeClass(that.options.styles.singleTab)
-                                .removeClass(that.options.styles.firstTab)
-                                .addClass(that.options.styles.lastTab);
-                        } else {
-                            // Apply & remove styles for all other tabs.
-                            li.removeClass(that.options.styles.singleTab)
-                                .removeClass(that.options.styles.lastTab)
-                                .removeClass(that.options.styles.firstTab);
-                        } // end:if.
-                    }); // end:loop.
-
-                    // Fire afterTabMove event.
-                    that.events.onTabMove.fire(
-                        tabShortId,
-                        method,
-                        targetTabShortId,
-                        tabPosition
-                    );
-                },
-            },
-        });
-    }; // end: function.
-
-    /**
-     * Private. Evaluates the list of tabs for the last instance of a 'locked' tab.
-     * Once found, this function adds a 'locked' class to all previously rendered tabs
-     * and it also hides the drag & drop grab handle from 'locked' tabs.
-     *
-     * @param {Object} that- reference to an instance of the TabManger component.
-     */
-    var manageLockedTabs = function (that) {
-        var tabList;
-        var lastLockedTab;
-
-        // Find the last instance of a locked tab and add a 'locked' class name
-        // to all previous tabs. Hide all drag & drop grab handles from 'locked' tabs.
-        tabList = that.locate('tabList');
-        lastLockedTab = tabList
-            .find(that.options.selectors.lockedModules)
-            .last();
-
-        if (lastLockedTab.length > 0) {
-            lastLockedTab.find(that.options.selectors.grabHandle).hide();
-            lastLockedTab
-                .prevAll()
-                .addClass(that.options.styles.lockedTab)
-                .find(that.options.selectors.grabHandle)
-                .hide();
-        } // end:if.
-
-        // Initialize drag & drop.
-        moveTabHandler(that);
-    }; // end:function.
-
-    /**
-     * Private. Executes initialization functions for the TabManager component.
-     *
-     * @param {Object} that- reference to an instance of the TabManger component.
-     */
-    var initialize = function (that) {
-        editTabHandler(that);
-        removeTabHandler(that);
-        addTabHandler(that);
-        manageLockedTabs(that);
-    }; // end:function.
-
-    /**
-     * Creator function for the TabManger component.
-     *
-     * @param {Object} container - reference to HTML DOM element by ID.
-     * @param {Object} options - reference to object containing all configurations.
-     -------------------------------------------------------*/
-    up.TabManager = function (container, options) {
-        var that;
-        that = fluid.initView('up.TabManager', container, options);
-
-        initialize(that);
-        return that;
-    }; // end:component.
-
-    /**
-     * Defaults function for the TabManger component.
-     -------------------------------------------------------*/
-    fluid.defaults('up.TabManager', {
-        selectors: {
-            text: '.flc-inlineEdit-text',
-            edit: '.flc-inlineEditable',
-            remove: '.portal-navigation-delete',
-            add: '.portal-navigation-add',
-            columns: '.flc-reorderer-column',
-            modules: '.movable,.up-fragment-admin',
-            lockedModules: '.locked:not(.up-fragment-admin)',
-            grabHandle: '.portal-navigation-gripper',
-            tabList: '#portalNavigationList',
-            tabListItems: '.portal-navigation',
-            tabGroup: '#activeTabGroup',
-        },
-        events: {
-            onTabEdit: null,
-            onTabRemove: null,
-            onTabAdd: null,
-            onTabMove: null,
-        },
-        styles: {
-            lockedTab: 'locked',
-            singleTab: 'single',
-            firstTab: 'first',
-            lastTab: 'last',
-        },
-        addTabLabel: 'My Tab',
-        addTabWidths: [50, 50],
-        insertBefore: 'insertBefore',
-        appendAfter: 'appendAfter',
-        tabContext: 'header',
-        numberOfPortlets: 0,
-        submitOnEnter: true,
-    });
-})(jQuery, fluid);
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-translator.js b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-translator.js
deleted file mode 100644
index 8970cb8520e..00000000000
--- a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-translator.js
+++ /dev/null
@@ -1,371 +0,0 @@
-/*
- * Licensed to Apereo under one or more contributor license
- * agreements. See the NOTICE file distributed with this work
- * for additional information regarding copyright ownership.
- * Apereo licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file
- * except in compliance with the License.  You may obtain a
- * copy of the License at the following location:
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-'use strict';
-var up = up || {};
-
-(function ($, fluid) {
-    up.TranslatorPortlet = function (container, options) {
-        var that = fluid.initView('up.TranslatorPortlet', container, options);
-
-        // this will hold the entity template in order to enable later reloading
-        var entityTemplate = null;
-
-        /**
-         * Shows the form of new message (message code will be fillable field).
-         */
-        var addMessageHandler = function () {
-            that.options.entity = null;
-            var data = [
-                {ID: 'code', value: ''},
-                {ID: 'locale', value: that.options.locale},
-                {ID: 'value', value: ''},
-            ];
-            var selectorMap = [
-                {selector: '.uptrans-mfrm-code', id: 'code'},
-                {selector: '.uptrans-mfrm-loc', id: 'locale'},
-                {selector: '.uptrans-mfrm-value', id: 'value'},
-            ];
-            var $form = that.locate('messageForm');
-            $form.find('.uptrans-mfrm-code-fieldset').show();
-            fluid.selfRender($form.show(), data, {cutpoints: selectorMap});
-            that.locate('portletForm').hide();
-            that.locate('formContainer').show();
-        };
-
-        /**
-         * Fills the message form with currently available message of specified
-         * locale (loaded via AJAX call).
-         */
-        var fillMessageForm = function () {
-            $.ajax({
-                url: that.options.resourceUrl,
-                dataType: 'json',
-                data: {
-                    action: 'getEntity',
-                    id: that.options.entity.id,
-                    locale: that.options.locale,
-                    entity: that.options.entityType,
-                },
-                success: function (json) {
-                    var message = json.message;
-                    // if there was no message, then initialize with empty values
-                    if (message == null) {
-                        message = {
-                            code: that.options.entity.id,
-                            locale: that.options.locale,
-                            value: '',
-                        };
-                    }
-                    var data = [
-                        {ID: 'code', value: message.code},
-                        {ID: 'locale', value: message.locale},
-                        {ID: 'value', value: message.value},
-                    ];
-
-                    var selectorMap = [
-                        {selector: '.uptrans-mfrm-code', id: 'code'},
-                        {selector: '.uptrans-mfrm-loc', id: 'locale'},
-                        {selector: '.uptrans-mfrm-value', id: 'value'},
-                    ];
-
-                    that.locate('portletForm').hide();
-                    that.locate('formContainer').show();
-                    var $form = that.locate('messageForm');
-                    $form.find('.uptrans-mfrm-code-fieldset').hide();
-                    fluid.selfRender($form.show(), data, {
-                        cutpoints: selectorMap,
-                    });
-                },
-            });
-        };
-
-        /**
-         * Posts the form contents to the resource URL using AJAX call.
-         */
-        var portletFormSubmitHandler = function () {
-            var $form = $(this);
-            $.ajax({
-                url: $form.attr('action'),
-                type: 'POST',
-                data: $form.serialize(),
-                success: function () {
-                    var $message = that
-                        .locate('formContainer')
-                        .find('.portlet-msg-success');
-                    $message.html(
-                        that.options.messages.portletTranslationSaved
-                    );
-                    $message.show();
-                    $message.fadeOut(4000);
-                },
-            });
-            return false;
-        };
-
-        /**
-         * Fills the portlet form with currently available portlet definition of
-         * specified locale (loaded via AJAX call).
-         */
-        var fillPortletForm = function () {
-            $.ajax({
-                url: that.options.resourceUrl,
-                dataType: 'json',
-                data: {
-                    action: 'getEntity',
-                    id: that.options.entity.id,
-                    locale: that.options.locale,
-                    entity: that.options.entityType,
-                },
-                success: function (json) {
-                    var portlet = json.portlet;
-                    var data = [
-                        {ID: 'id', value: portlet.id},
-                        {ID: 'locale', value: portlet.locale},
-                        {ID: 'original.title', value: portlet.original.title},
-                        {
-                            ID: 'localized.title',
-                            value: portlet.localized.title,
-                        },
-                        {ID: 'original.name', value: portlet.original.name},
-                        {ID: 'localized.name', value: portlet.localized.name},
-                        {
-                            ID: 'original.description',
-                            value: portlet.original.description,
-                        },
-                        {
-                            ID: 'localized.description',
-                            value: portlet.localized.description,
-                        },
-                    ];
-
-                    var selectorMap = [
-                        {selector: '.uptrans-pfrm-id', id: 'id'},
-                        {selector: '.uptrans-pfrm-loc', id: 'locale'},
-                        {
-                            selector: '.uptrans-pfrm-loc-name',
-                            id: 'localized.name',
-                        },
-                        {
-                            selector: '.uptrans-pfrm-loc-title',
-                            id: 'localized.title',
-                        },
-                        {
-                            selector: '.uptrans-pfrm-loc-descr',
-                            id: 'localized.description',
-                        },
-                        {
-                            selector: '.uptrans-pfrm-orig-title',
-                            id: 'original.title',
-                        },
-                        {
-                            selector: '.uptrans-pfrm-orig-name',
-                            id: 'original.name',
-                        },
-                        {
-                            selector: '.uptrans-pfrm-orig-descr',
-                            id: 'original.description',
-                        },
-                    ];
-
-                    that.locate('messageForm').hide();
-                    that.locate('formContainer').show();
-                    fluid.selfRender(that.locate('portletForm').show(), data, {
-                        cutpoints: selectorMap,
-                    });
-                },
-            });
-        };
-
-        /**
-         * Updates form contents depending on selected entity type and locale.
-         */
-        var updateForm = function () {
-            // if no entity is selected, then there's no need to show the form
-            if (that.options.entity) {
-                if (that.options.entityType == 'portlet') {
-                    fillPortletForm();
-                } else if (that.options.entityType == 'message') {
-                    fillMessageForm();
-                }
-            }
-        };
-
-        /**
-         * Reload translateable entity list.
-         */
-        var refreshEntities = function (data) {
-            that.locate('formContainer').hide();
-            if (that.options.entityType == 'message') {
-                that.locate('addMessage').show();
-            } else {
-                that.locate('addMessage').hide();
-            }
-            var entities = [];
-            $(
-                data.entities.sort(up.getStringPropertySortFunction('title'))
-            ).each(function (index, entity) {
-                entities.push({
-                    ID: that.options.namespace + 'data:',
-                    value: entity.title,
-                    decorators: [
-                        {
-                            type: 'jQuery',
-                            func: 'click',
-                            args: function () {
-                                that.options.entity = entity;
-                                updateForm();
-                            },
-                        },
-                        {
-                            type: 'jQuery',
-                            func: 'keydown',
-                            args: function () {
-                                // enter key has been clicked
-                                if (event.keyCode == 13) {
-                                    that.options.entity = entity;
-                                    updateForm();
-                                }
-                            },
-                        },
-                    ],
-                });
-            });
-
-            var selectorMap = [
-                {
-                    selector: that.options.selectors.entityList,
-                    id: that.options.namespace + 'data:',
-                },
-                {selector: that.options.selectors.entity, id: 'name'},
-            ];
-            if (entityTemplate == null) {
-                entityTemplate = fluid.selfRender(
-                    that.locate('entities'),
-                    entities,
-                    {
-                        cutpoints: selectorMap,
-                    }
-                );
-            } else {
-                fluid.reRender(
-                    entityTemplate,
-                    that.locate('entities'),
-                    entities,
-                    {
-                        cutpoints: selectorMap,
-                    }
-                );
-            }
-        };
-
-        /**
-         * Load entities to be translated in specified locale using AJAX.
-         */
-        var entityTypeSelectionChangedHandler = function () {
-            var entity = that.locate('entityType').val();
-            that.options.entityType = that.locate('entityType').val();
-            that.options.entity = null;
-
-            if (entity && entity != '') {
-                // get entities from login
-                $.ajax({
-                    url: that.options.resourceUrl,
-                    dataType: 'json',
-                    data: {entity: entity, action: 'getEntityList'},
-                    success: refreshEntities,
-                });
-            }
-        };
-
-        /**
-         * Submits a message form to a resource URL using AJAX.
-         */
-        var messageFormSubmitHandler = function () {
-            var $form = $(this);
-            $.ajax({
-                url: $form.attr('action'),
-                type: 'POST',
-                data: $form.serialize(),
-                success: function () {
-                    // if this is a new key (selected entity was null), then we must reload entity list
-                    if (that.options.entity == null) {
-                        entityTypeSelectionChangedHandler();
-                    }
-                    var $message = that
-                        .locate('formContainer')
-                        .find('.portlet-msg-success');
-                    $message.html(
-                        that.options.messages.messageTranslationSaved
-                    );
-                    $message.show();
-                    $message.fadeOut(4000);
-                },
-            });
-            return false;
-        };
-
-        // init event handlers
-        that.locate('entityType').change(entityTypeSelectionChangedHandler);
-        that.locate('portletForm').submit(portletFormSubmitHandler);
-        that.locate('messageForm').submit(messageFormSubmitHandler);
-        that.locate('entityForm').submit(function () {
-            return false;
-        });
-        that.locate('addMessage').click(addMessageHandler);
-
-        var localeSelector = that.locate('locale');
-        localeSelector.change(function () {
-            that.options.locale = localeSelector.val();
-            updateForm();
-        });
-
-        // init portlet state - load entity list of default selection and set
-        // the locale to default selection
-        that.options.locale = localeSelector.val();
-        entityTypeSelectionChangedHandler();
-
-        return that;
-    };
-
-    fluid.defaults('up.TranslatorPortlet', {
-        namespace: 'uptrans',
-        locale: null,
-        entityType: null,
-        entity: null,
-        resourceUrl: '',
-        selectors: {
-            entityForm: '#uptrans-form',
-            locale: '#uptrans-locale',
-            entityType: '#uptrans-entityType',
-            entity: '.uptrans-entity',
-            entities: '#uptrans-entities',
-            entityList: '#uptrans-entityList',
-            portletForm: '#uptrans-portletForm',
-            messageForm: '#uptrans-messageForm',
-            formContainer: '#uptrans-formContainer',
-            addMessage: '#uptrans-addMessage',
-        },
-        messages: {
-            messageTranslationSaved:
-                'Message translation has been successfully saved',
-            portletTranslationSaved:
-                'Portlet definition translation has been successfully saved',
-        },
-    });
-})(jQuery, fluid);
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-url-provider.js b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-url-provider.js
deleted file mode 100644
index 5206653cdf2..00000000000
--- a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-url-provider.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/*
- * Licensed to Apereo under one or more contributor license
- * agreements. See the NOTICE file distributed with this work
- * for additional information regarding copyright ownership.
- * Apereo licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file
- * except in compliance with the License.  You may obtain a
- * copy of the License at the following location:
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-var uportal = uportal || {};
-
-(function ($, fluid) {
-    /**
-     * Instantiate a LayoutPersistence component
-     *
-     * @param {Object} component Container the element containing the fragment browser
-     * @param {Object} options configuration options for the components
-     */
-    up.UrlProvider = function (container, options) {
-        // construct the new component
-        var that = fluid.initView('up.UrlProvider', container, options);
-
-        that.getPortletUrl = function (fname) {
-            return that.options.portalContext + '/p/' + fname;
-        };
-
-        that.getTabUrl = function (tabId) {
-            return that.options.portalContext + '/f/' + tabId;
-        };
-
-        that.getPortalHomeUrl = function () {
-            return that.options.portalContext + '/';
-        };
-
-        return that;
-    };
-
-    // defaults
-    fluid.defaults('up.UrlProvider', {
-        portalContext: '/uPortal',
-    });
-})(jQuery, fluid);
diff --git a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-util.js b/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-util.js
deleted file mode 100644
index 873537e82d4..00000000000
--- a/uPortal-webapp/src/main/webapp/media/skins/common/javascript/uportal/up-util.js
+++ /dev/null
@@ -1,154 +0,0 @@
-/*
- * Licensed to Apereo under one or more contributor license
- * agreements. See the NOTICE file distributed with this work
- * for additional information regarding copyright ownership.
- * Apereo licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file
- * except in compliance with the License.  You may obtain a
- * copy of the License at the following location:
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-'use strict';
-var up = up || {};
-
-/**
- * This file contains a number of general utility methods for use within
- * uPortal.
- */
-(function ($, fluid) {
-    /**
-     * Extracts a uPortal DLM element ID from an HTML node.  This default
-     * implementation assumes that any submitted HTML element has an ID of
-     * the form <type>_<elementID>.
-     *
-     * @param that    Fluid component
-     * @param element HTML element for which to determine the ID
-     * @return {String} DLM node ID associated with the supplied HTML node
-     */
-    up.defaultNodeIdExtractor = function (element) {
-        return $(element).attr('id').split('_')[1];
-    };
-
-    /**
-     * Returns a sort function designed to sort two objects via a
-     * case-insensitive comparison of a single string-type object property.
-     * This method also allows the caller to specify a "special" value that
-     * will always be the first item in the array, regardless of its
-     * alphabetic relationship to other elements in the array.
-     *
-     * @param propertyName {String} name of the property on which to perform
-     *          comparisons
-     * @param firstValue {String} property value which should always be sorted
-     *          first.  May be left undefined.
-     */
-    up.getStringPropertySortFunction = function (propertyName, firstValue) {
-        return function (a, b) {
-            // get the values for the configured property from
-            // each object and transform them to lower case
-            var aprop = a[propertyName].toLowerCase();
-            var bprop = b[propertyName].toLowerCase();
-
-            // if the values are identical, indicate an equals
-            if (aprop === bprop) {
-                return 0;
-            }
-
-            // if the firstValue property has been specified,
-            // test each object to determine whether it matches
-            if (firstValue) {
-                firstValue = firstValue.toLowerCase();
-                if (aprop === firstValue) {
-                    return -1;
-                } else if (bprop === firstValue) {
-                    return 1;
-                }
-            }
-
-            // otherwise perform a normal alphabetic sort
-            return aprop > bprop ? 1 : -1;
-        };
-    };
-
-    /**
-     * Escape special character in preparation for using the supplied string
-     * in a JavaScript RegExp.
-     *
-     * @param str {String} String to be cleaned
-     */
-    up.escapeSpecialChars = function (string_) {
-        var specials = new RegExp('[.*+?|()\\[\\]{}\\\\]', 'g'); // .*+?|()[]{}\
-        return string_.replaceAll(specials, '\\$&');
-    };
-
-    /**
-     * Refresh a Fluid pager with a new data model.  This method will also
-     * return the pager to the first page
-     *
-     * @param pager  {Object}  pager to be refreshed
-     * @param data   {Object}  new data model
-     */
-    up.refreshPager = function (pager, data) {
-        var newModel = fluid.copy(pager.model);
-        newModel.totalRange = data.length;
-        newModel.pageIndex = 0;
-        newModel.pageCount = Math.max(
-            1,
-            Math.floor((newModel.totalRange - 1) / newModel.pageSize) + 1
-        );
-        fluid.clear(pager.options.dataModel);
-        fluid.model.copyModel(pager.options.dataModel, data);
-        pager.permutation = undefined;
-        pager.events.onModelChange.fire(newModel, pager.model, pager);
-        fluid.model.copyModel(pager.model, newModel);
-    };
-
-    /**
-     * Shows a "loading" screen.
-     *
-     * @param {Object} selector - reference to jQuery selector.
-     */
-    up.showLoader = function (selector) {
-        selector.show();
-    }; // end:function.
-
-    /**
-     * Hides a "loading" screen after a 1.5 second delay.
-     *
-     * @param {Object} selector - reference to jQuery selector.
-     */
-    up.hideLoader = function (selector, time) {
-        var t;
-        var duration;
-
-        duration = time === undefined ? 1000 : time;
-        t = setTimeout(function () {
-            selector.fadeOut('slow');
-            clearTimeout(t);
-        }, duration);
-    }; // end:function.
-
-    /**
-     * Replaces all occurances of {0}, {1}, ..., {n} with values from argument array.
-     *
-     * @param {String} message - message string.
-     * @param {Array} args - array of string objects.
-     * @return Formatted message string.
-     */
-    up.formatMessage = function (message, arguments_) {
-        var s = message;
-
-        for (var index = 0; index < arguments_.length; index++) {
-            var reg = new RegExp('\\{' + index + '\\}', 'gm');
-            s = s.replace(reg, arguments_[index]);
-        }
-        return s;
-    }; // end:function
-})(jQuery, fluid);
diff --git a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/common.less b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/common.less
index 24e7ef750f6..12ee9baccf6 100644
--- a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/common.less
+++ b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/common.less
@@ -154,4 +154,9 @@
      Plain css flex and grid layouts.
      ========================================================================== */
   @import "less/grids.less";
+
+  /* ==========================================================================
+     jQuery UI Dialog Fixes
+     ========================================================================== */
+  // Note: Close button styling reverted due to hover state and icon positioning issues
 }
diff --git a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/common_skin.xml b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/common_skin.xml
index 0fe223413fe..ed253b45b9f 100644
--- a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/common_skin.xml
+++ b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/common_skin.xml
@@ -29,15 +29,25 @@
     <!--
     | NOTE:  The following order is important!
     +-->
-    <js included="plain">/ResourceServingWebapp/rs/jquery/1.12.4/jquery-1.12.4.js</js>
-    <js included="aggregated">/ResourceServingWebapp/rs/jquery/1.12.4/jquery-1.12.4.min.js</js>
-
-    <!-- Must follow loading of jQuery -->
-    <js included="plain">/ResourceServingWebapp/rs/jquery-migrate/jquery-migrate-1.4.1.js</js>
-    <js included="aggregated">/ResourceServingWebapp/rs/jquery-migrate/jquery-migrate-1.4.1.min.js</js>
-
-    <js included="plain" resource="true">/rs/jqueryui/1.10.3/jquery-ui-1.10.3.js</js>
-    <js included="aggregated" resource="true">/rs/jqueryui/1.10.3/jquery-ui-1.10.3.min.js</js>
+    <js included="plain">/resource-server/rs/jquery/3.7.1/jquery-3.7.1.js</js>
+    <js included="aggregated">/resource-server/rs/jquery/3.7.1/jquery-3.7.1.min.js</js>
+
+    <!-- jQuery Migrate for legacy compatibility -->
+    <js included="plain">/resource-server/rs/jquery-migrate/jquery-migrate-3.5.0.js</js>
+    <js included="aggregated">/resource-server/rs/jquery-migrate/jquery-migrate-3.5.0.min.js</js>
+
+    <!-- Bootstrap 5 CSS -->
+    <css included="plain" resource="true">/webjars/bootstrap/css/bootstrap.css</css>
+    <css included="aggregated" resource="true">/webjars/bootstrap/css/bootstrap.min.css</css>
+    <css resource="true">/webjars/bootstrap/css/bootstrap.min.css</css>
+    
+    <!-- Bootstrap 5 JS -->
+    <js included="plain" resource="true">/webjars/bootstrap/js/bootstrap.bundle.js</js>
+    <js included="aggregated" resource="true">/webjars/bootstrap/js/bootstrap.bundle.min.js</js>
+    <js resource="true">/webjars/bootstrap/js/bootstrap.bundle.min.js</js>
+
+    <js included="plain">/resource-server/rs/jqueryui/1.14.1/jquery-ui.js</js>
+    <js included="aggregated">/resource-server/rs/jqueryui/1.14.1/jquery-ui.min.js</js>
 
     <!-- Uncomment for internationalization.  Removed for minor efficiency especially for mobile networks. -->
     <!--
@@ -45,22 +55,8 @@
     <js included="aggregated" resource="true">/ResourceServingWebapp/rs/jqueryui/1.10.3/i18n/jquery-ui-i18n.min.js</js>
     -->
 
-    <js included="plain">/ResourceServingWebapp/rs/bootstrap/3.3.5/js/bootstrap.js</js>
-    <js included="aggregated">/ResourceServingWebapp/rs/bootstrap/3.3.5/js/bootstrap.min.js</js>
 
-    <js included="plain">/ResourceServingWebapp/rs/bootstrap-plugins/accessibility/1.0.2/js/bootstrap-accessibility.js</js>
-    <js included="aggregated">/ResourceServingWebapp/rs/bootstrap-plugins/accessibility/1.0.2/js/bootstrap-accessibility.min.js</js>
 
-    <!-- Fluid must come after Bootstrap.  Issue found with Respondr.  When you click on the 'Manage Portlets' link,
-     | fluid was calling that.container.tooltip("widget"); which should call jQueryUI's tooltip function, but
-     | bootstrap.js overwrote it and caused a Javascript error.  Loading bootstrap first will overwrite tooltip
-     | (and perhaps other functions), then loading fluid will overwrite bootstrap so fluid works.
-     | todo: if we will use bootstrap tooltip JavaScript, bootstrap does have support for a noconflict mode (see
-     | http://getbootstrap.com/javascript/#js-noconflict) and we can save the bootstrap functions to invoke them
-     | manually.
-     -->
-    <js included="plain" resource="true">/rs/fluid/1.5.0/js/fluid-custom.js</js>
-    <js included="aggregated" resource="true">/rs/fluid/1.5.0/js/fluid-custom.min.js</js>
 
     <js included="plain" resource="true">/rs/underscore/1.8.3/underscore.js</js>
     <js included="aggregated" resource="true">/rs/underscore/1.8.3/underscore.min.js</js>
@@ -71,25 +67,33 @@
     <js included="plain">/ResourceServingWebapp/rs/jquery-plugins/noty/2.2.0/jquery.noty.packaged.js</js>
     <js included="aggregated">/ResourceServingWebapp/rs/jquery-plugins/noty/2.2.0/jquery.noty.packaged.min.js</js>
 
-    <!-- Data Table Includes -->
-    <js included="plain" resource="true">/rs/datatables/1.9.4/media/js/jquery.dataTables.js</js>
-    <js included="aggregated" resource="true">/rs/datatables/1.9.4/media/js/jquery.dataTables.min.js</js>
+    <!-- DataTables 1.13.8 Core -->
+    <js included="plain">https://cdn.datatables.net/1.13.8/js/jquery.dataTables.js</js>
+    <js included="aggregated">https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js</js>
+    
+    <!-- DataTables Bootstrap 5 Integration -->
+    <js included="plain">https://cdn.datatables.net/1.13.8/js/dataTables.bootstrap5.js</js>
+    <js included="aggregated">https://cdn.datatables.net/1.13.8/js/dataTables.bootstrap5.min.js</js>
+    <css included="plain">https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap5.css</css>
+    <css included="aggregated">https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap5.min.css</css>
 
     <!-- Rating Includes -->
     <js included="plain" resource="true">/rs/jquery-plugins/rating/1.0/bootstrap-rating-input.js</js>
     <js included="aggregated" resource="true">/rs/jquery-plugins/rating/1.0/bootstrap-rating-input.min.js</js>
 
-    <!-- Data Table Bootstrap Includes -->
-    <js included="plain" resource="true">/rs/datatables/1.9.4/plugins/integration/bootstrap/3/dataTables.bootstrap.js</js>
-    <js included="aggregated" resource="true">/rs/datatables/1.9.4/plugins/integration/bootstrap/3/dataTables.bootstrap.js</js>
-    <css included="plain" resource="true">/rs/datatables/1.9.4/plugins/integration/bootstrap/3/dataTables.bootstrap.css</css>
-    <css included="aggregated" resource="true">/rs/datatables/1.9.4/plugins/integration/bootstrap/3/dataTables.bootstrap.css</css>
-
-    <!-- Data Table ColumnFilterWidgets Includes -->
-    <js included="plain" resource="true">/rs/datatables/1.9.4/extras/column-filter-widgets/js/ColumnFilterWidgets.js</js>
-    <js included="aggregated" resource="true">/rs/datatables/1.9.4/extras/column-filter-widgets/js/ColumnFilterWidgets.js</js>
-    <css included="plain" resource="true">/rs/datatables/1.9.4/extras/column-filter-widgets/css/ColumnFilterWidgets.css</css>
-    <css included="aggregated" resource="true">/rs/datatables/1.9.4/extras/column-filter-widgets/css/ColumnFilterWidgets.css</css>
+    <!-- DataTables SearchPanes for column filtering (modern replacement for ColumnFilterWidgets) -->
+    <js included="plain">https://cdn.datatables.net/searchpanes/2.2.0/js/dataTables.searchPanes.js</js>
+    <js included="aggregated">https://cdn.datatables.net/searchpanes/2.2.0/js/dataTables.searchPanes.min.js</js>
+    <js included="plain">https://cdn.datatables.net/searchpanes/2.2.0/js/searchPanes.bootstrap5.js</js>
+    <js included="aggregated">https://cdn.datatables.net/searchpanes/2.2.0/js/searchPanes.bootstrap5.min.js</js>
+    <css included="plain">https://cdn.datatables.net/searchpanes/2.2.0/css/searchPanes.bootstrap5.css</css>
+    <css included="aggregated">https://cdn.datatables.net/searchpanes/2.2.0/css/searchPanes.bootstrap5.min.css</css>
+    
+    <!-- DataTables Select (required for SearchPanes) -->
+    <js included="plain">https://cdn.datatables.net/select/1.7.0/js/dataTables.select.js</js>
+    <js included="aggregated">https://cdn.datatables.net/select/1.7.0/js/dataTables.select.min.js</js>
+    <css included="plain">https://cdn.datatables.net/select/1.7.0/css/select.bootstrap5.css</css>
+    <css included="aggregated">https://cdn.datatables.net/select/1.7.0/css/select.bootstrap5.min.css</css>
 
     <!-- jsTree Includes (entity-selector) -->
     <js included="plain" resource="true">/webjars/jstree/dist/jstree.js</js>
@@ -113,8 +117,7 @@
     <js included="plain" resource="true">/webjars/webcomponents__webcomponentsjs/webcomponents-bundle.js</js>
     <js included="aggregated" resource="true">/webjars/webcomponents__webcomponentsjs/webcomponents-bundle.js</js>
 
-    <js included="plain" resource="true">/rs/conflict-resolution/js/resolve-conflicts.js</js>
-    <js included="aggregated" resource="true">/rs/conflict-resolution/js/resolve-conflicts.min.js</js>
+
 
     <js included="aggregated" resource="true">/scripts/portal-analytics.js</js>
 
diff --git a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/javascript/uportal/fluid-jquery-compatibility.js b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/javascript/uportal/fluid-jquery-compatibility.js
deleted file mode 100644
index 61f19ef2f94..00000000000
--- a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/javascript/uportal/fluid-jquery-compatibility.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/*
- * Licensed to Apereo under one or more contributor license
- * agreements. See the NOTICE file distributed with this work
- * for additional information regarding copyright ownership.
- * Apereo licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file
- * except in compliance with the License.  You may obtain a
- * copy of the License at the following location:
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-'use strict';
-
-/*
- * The role of this library is to support the continued use of Fluid Infusion 1.4
- * in Respondr for as long as we need it (with any luck, not long).  Bootstrap 3
- * requires jQuery 1.9.x or higher;  but Fluid 1.4 (still the most recent)
- * supports only 1.6.x.  uPortal has a lot of interfaces written with Fluid.
- * The short-term strategy will be to deal with this issue as follows:
- *
- *   - Load jQuery 1.6.x (compatible with Fluid 1.4)
- *   - Load jQueryUI 1.8.x (compatible with Fluid 1.4)
- *   - Load Fluid 1.4
- *   - Remove jQuery 1.6.x from the global namespace (this file)
- *   - Load jQuery 1.10.x (compatible with Bootstrap 3)
- *
- * This approach means that we will be loading two copies of the jQuery library
- * in the theme alone (before we even consider portlets).  These steps MUST BE
- * PERFORMED IN THIS ORDER.
- */
-
-jQuery.noConflict(true);
diff --git a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/gallery.less b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/gallery.less
deleted file mode 100644
index 8b40dea9bc7..00000000000
--- a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/gallery.less
+++ /dev/null
@@ -1,1079 +0,0 @@
-/**
- * Licensed to Apereo under one or more contributor license
- * agreements. See the NOTICE file distributed with this work
- * for additional information regarding copyright ownership.
- * Apereo licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file
- * except in compliance with the License.  You may obtain a
- * copy of the License at the following location:
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-/*
-------------------------------------
-  uPortal Gallery.
-------------------------------------
- * The gallery is a sliding drawer that provides interfaces for customizing the protal.
- */
-
-/* $gray=@grayscale4 | $graylight=@grayscale3 | $graylighter=@grayscale2 | $graylightest=@grayscale1
- * $graydark=@grayscale7 | $graydarker=@grayscale8 | $graydarkest=@grayscale9
- * $dgray=@grayscale8 | $dgraylight=@grayscale7 | $dgraylighter=@grayscale6 | $dgraylightest=@grayscale5
- * $dgraydark=@grayscale8 | $dgraydarker=@grayscale9 | $dgraydarkest=@grayscale10
- * Colors
- */
-@galleryBackground: @grayscale10;
-@galleryBorder: 1px solid @grayscale4;
-@galleryHandleBackground: @black url("./common/images/gallery-bar.png") bottom
-  left repeat-x;
-@galleryHandleBorder: 1px solid @grayscale7;
-@galleryHandleLinkBackround: @white scroll
-  url("./common/images/gallery-handle.png") 0 0 repeat-x;
-@galleryHandleLink: @grayscale9;
-@galleryHandleRound: 3px;
-@galleryHandleShadow: 0 1px 2px @grayscale4;
-@galleryHandleIconClosed: url("./common/images/gallery-handle-arrow-down.png");
-@galleryHandleIconOpen: url("./common/images/gallery-handle-arrow-up.png")
-  !important;
-@galleryBarBackground: transparent url("./common/images/gallery-bar.png") top
-  left repeat-x;
-@galleryMenuBackground: @grayscale9;
-@galleryMenuItemBackground: @grayscale8;
-@galleryMenuItemLink: @white;
-@galleryMenuItemBackgroundHover: @color1-darker;
-@galleryMenuItemLinkHover: @white;
-@galleryMenuItemActiveBackground: @grayscale10;
-@galleryMenuItemActiveLink: @white;
-@galleryMenuItemActiveIcon: transparent
-  url("./common/images/gallery-arrow-right.png") 90% 50% no-repeat;
-@galleryCloseButtonType: default;
-@galleryFilterBackground: @grayscale7;
-@galleryFilterBorder: 1px solid @grayscale8;
-@galleryFilterRound: 5px;
-@galleryFilterTitleRound: 5px;
-@galleryFilterTitleBackground: @grayscale10;
-@galleryFilterTitle: @color1;
-@galleryFilterTitleHover: @color1-lighter;
-@galleryFilterTitleActive: @white;
-@galleryFilterTitleActiveHover: @color1-lighter;
-@galleryFilterTitleActiveBgd: @grayscale9;
-@galleryFilterSubtitle: @grayscale2;
-@galleryFilterSubtitleLine: 1px dotted @grayscale9;
-@galleryFSearchInputBackground: @grayscale8;
-@galleryFSearchInputText: @white;
-@galleryFSearchInputPadding: 0.3em;
-@galleryFSearchInputHover: @grayscale7;
-@galleryFSearchInputFocusText: @black;
-@galleryFSearchInputFocusBackground: @white;
-@galleryCatLink: @grayscale3;
-@galleryCatLinkHover: @color1;
-@galleryCatActiveLink: @white;
-@galleryResultsBottomPadding: 5px;
-@galleryResultsText: @grayscale4;
-@galleryRIBackground: @grayscale8;
-@galleryRIBorder: 1px solid @grayscale5;
-@galleryRIRound: 5px;
-@galleryRIShadow: 1px 1px 2px #000;
-@galleryRIUtilityHeight: 16px;
-@galleryRIUtilityRound: 5px;
-@galleryRIGripper: @grayscale9 url("./common/images/gripper.png") 5px 0px
-  no-repeat;
-@galleryRITitle: @white;
-@galleryRIDescription: @grayscale3;
-@galleryRIBackgroundHover: @grayscale9;
-@galleryRIBorderHover: 1px soild @color1;
-@galleryRIGradient1Hover: @grayscale10;
-@galleryRIGradient2Hover: #060606;
-@galleryRILink: #000;
-@galleryRILinkBackground: @grayscale8;
-@galleryRILinkGradient1: @grayscale4;
-@galleryRILinkGradient2: @grayscale9;
-@galleryRILinkRound: 5px;
-@galleryRILinkBackgroundHover: @color1-dark;
-@galleryRILinkGradient1Hover: @color1-light;
-@galleryRILinkGradient2Hover: @color1-dark;
-@galleryRISelectedBackground: @grayscale8;
-@galleryRISelectedBorderWidth: 3px;
-@galleryRISelectedBorderStyle: solid;
-@galleryRISelectedBorderColor: @color1;
-@galleryPagerText: @white;
-@galleryPagerButtonBackground: @grayscale7;
-@galleryPagerButtonBorder: 1px solid @grayscale5;
-@galleryPagerButtonGradient1: @grayscale8;
-@galleryPagerButtonGradient2: @grayscale10;
-@galleryPagerButtonRound: 5px;
-@galleryPagerBtnBackgroundHover: @grayscale5;
-@galleryPagerBtnGradient1Hover: @grayscale6;
-@galleryPagerBtnGradient2Hover: @grayscale10;
-@galleryPagerBtnBgdDisabled: @grayscale8 !important;
-@galleryPagerBtnBorderDisabled: 1px solid @grayscale7 !important;
-
-.gallery-handle-round(@galleryHandleRound) when (@galleryHandleRound) {
-  .border-radiuses(0, 0, @galleryHandleRound, @galleryHandleRound);
-}
-
-.gallery-handle-shadow(@galleryHandleShadow) when (@galleryHandleShadow) {
-  .box-shadow(@galleryHandleShadow);
-}
-
-.gallery-filter-round(@galleryFilterRound) when (@galleryFilterRound) {
-  .border-radius(@galleryFilterRound);
-}
-
-.gallery-filter-title-round(@galleryFilterTitleRound)
-  when
-  (@galleryFilterTitleRound) {
-  .border-radiuses(5px, 0, 0, 5px);
-
-  span {
-    .border-radiuses(@galleryFilterTitleRound, @galleryFilterTitleRound, 0, 0);
-  }
-}
-
-.gallery-ri-round(@galleryRIRound) when (@galleryRIRound) {
-  .border-radius(@galleryRIRound);
-}
-
-.gallery-ri-shadow(@galleryRIShadow) when (@galleryRIShadow) {
-  .box-shadow(@galleryRIShadow);
-}
-
-.gallery-ri-utility-round(@galleryRIUtilityRound)
-  when
-  (@galleryRIUtilityRound) {
-  .border-radiuses(@galleryRIUtilityRound, @galleryRIUtilityRound, 0, 0);
-}
-
-.gallery-ri-link-gradient(@galleryRILinkGradient1)
-  when
-  (@galleryRILinkGradient1) {
-  .vertical-gradient(@galleryRILinkGradient1, @galleryRILinkGradient2);
-}
-
-.gallery-ri-link-round(@galleryRILinkRound) when (@galleryRILinkRound) {
-  .border-radiuses(0, @galleryRILinkRound, 0, 0);
-}
-
-.gallery-ri-link-gradient-hover(@galleryRILinkGradient1Hover)
-  when
-  (@galleryRILinkGradient1Hover) {
-  .vertical-gradient(@galleryRILinkGradient1Hover, @galleryRILinkGradient2Hover);
-}
-
-.gallery-pager-button-gradient(@galleryPagerButtonGradient1)
-  when
-  (@galleryPagerButtonGradient1) {
-  .vertical-gradient(@galleryPagerButtonGradient1, @galleryPagerButtonGradient2);
-}
-
-.gallery-pager-button-round(@galleryPagerButtonRound)
-  when
-  (@galleryPagerButtonRound) {
-  .border-radius(@galleryPagerButtonRound);
-}
-
-.gallery-pager-button-gradient-hover(@galleryPagerBtnGradient1Hover)
-  when
-  (@galleryPagerBtnGradient1Hover) {
-  .vertical-gradient(@galleryPagerBtnGradient1Hover, @galleryPagerBtnGradient2Hover);
-}
-
-.portal {
-  .up-gallery {
-    background: @galleryBackground;
-    border: @galleryBorder;
-
-    div {
-      margin: 0;
-      padding: 0;
-    }
-
-    .handle {
-      /* Clickable handle that opens the drawer. Once open, the handle can be clicked to close the drawer. */
-      background: @galleryHandleBackground;
-
-      a {
-        background: @galleryHandleLinkBackround;
-        color: @galleryHandleLink;
-        border: @galleryHandleBorder;
-        border-top: none;
-        // .gallery-handle-round(@galleryHandleRound);
-        // .gallery-handle-shadow(@galleryHandleShadow);
-
-        span {
-          background-image: @galleryHandleIconClosed;
-          background-position: right center;
-          background-repeat: no-repeat;
-        }
-      }
-
-      .handle-arrow-up {
-        background-image: @galleryHandleIconOpen;
-      }
-    }
-
-    .gallery-inner {
-      //.up-gallery .gallery-inner {display:none; overflow: hidden; padding-top:7px; height:200px;  position:relative;}
-      // background: @galleryBarBackground;
-      // border-top: 5px solid @grayscale2;
-      display: none;
-      overflow: hidden;
-      height: 200px;
-      position: relative;
-
-      .menu-wrapper {
-        display: block;
-        float: left;
-        height: 200px;
-        position: relative;
-        width: 130px;
-
-        /* The navigation menu of gallery views. */
-        .menu {
-          background: @galleryMenuBackground;
-          height: 190px;
-          margin: 0 auto 0 15px;
-          padding: 10px 0 0;
-          position: relative;
-          width: 100px;
-
-          .border();
-
-          li {
-            background: @galleryMenuItemBackground;
-            cursor: pointer;
-            height: 34px;
-            list-style: none;
-            margin: 0;
-            position: relative;
-
-            .border(@grayscale7);
-
-            a {
-              color: @galleryMenuItemLink;
-              text-decoration: none;
-
-              span {
-                bottom: 0;
-                display: block;
-                font-size: 12px;
-                font-weight: bold;
-                margin-right: -2px;
-                padding: 8px;
-              }
-            }
-
-            &:hover,
-            &:active {
-              background: @galleryMenuItemBackgroundHover;
-
-              a {
-                color: @galleryMenuItemLinkHover;
-              }
-            }
-          }
-
-          .active {
-            background: @galleryMenuItemActiveBackground;
-            margin-right: -1px;
-            border-right: none;
-
-            a {
-              color: @galleryMenuItemActiveLink;
-            }
-
-            span {
-              background: @galleryMenuItemActiveIcon;
-              position: relative;
-            }
-
-            &:hover {
-              background: @galleryMenuItemActiveBackground;
-            }
-          }
-
-          li.last {
-            border-bottom-width: 1px;
-            border-bottom-style: solid;
-          }
-        }
-      } /* end .menu-wrapper */
-
-      .content-filters-wrapper {
-        /* Search and category filters for the add portlet and use portlet views. */
-        background: @grayscale9;
-        border: @galleryFilterBorder;
-        float: left;
-
-        .border-radius();
-
-        h3 {
-          /* Filter titles */
-          background: @galleryFilterTitleBackground;
-          color: @galleryFilterTitle;
-          margin: 0;
-          padding: 5px 0 0;
-          cursor: pointer;
-          font-size: 12px;
-
-          .border-radiuses(5px, 0, 0, 5px);
-
-          span {
-            padding: 1px 10px;
-          }
-        }
-
-        h3:hover,
-        h3:focus {
-          color: @galleryFilterTitleHover;
-        }
-
-        .active {
-          h3 {
-            span {
-              background: @galleryFilterTitleActiveBgd;
-              color: @galleryFilterTitleActive;
-              .border-radiuses(5px, 0, 0, 5px);
-            }
-          }
-        }
-
-        .active h3:hover,
-        .active h3:focus {
-          color: @galleryFilterTitleActiveHover;
-        }
-
-        h4 {
-          /* Filter subtitles */
-          color: @galleryFilterSubtitle;
-          border-bottom: @galleryFilterSubtitleLine;
-        }
-
-        .portlet-search-input {
-          /* Filter search */
-          background: @galleryFSearchInputBackground;
-          color: @galleryFSearchInputText;
-          padding: @galleryFSearchInputPadding;
-          .border-radius();
-
-          &:hover {
-            background: @galleryFSearchInputHover;
-          }
-
-          &:focus {
-            color: @galleryFSearchInputFocusText;
-            background: @galleryFSearchInputFocusBackground;
-          }
-        }
-
-        .categories {
-          /* Filter categories */
-          a {
-            color: @galleryCatLink;
-          }
-
-          a:hover,
-          a:focus {
-            color: @galleryCatLinkHover;
-          }
-
-          .active a {
-            color: @galleryCatActiveLink;
-          }
-        }
-      } /* end .content-filters-wrapper */
-
-      .results-wrapper {
-        /* Results section of the gallery. Lists portlets, skins, or layout options. */
-        padding-bottom: @galleryResultsBottomPadding;
-        color: @galleryResultsText;
-
-        .layout-wrapper .ri-link,
-        .skins-wrapper .ri-link,
-        .portlet.result-item {
-          background: @grayscale10;
-
-          .border(@grayscale5);
-          .border-radius();
-          .box-shadow(@galleryRIShadow);
-
-          &:hover,
-          &:focus,
-          &:active {
-            background: @galleryRIBackgroundHover;
-            border: @galleryRIBorderHover;
-
-            .vertical-gradient(@galleryRIGradient1Hover, @galleryRIGradient2Hover);
-          }
-        }
-
-        .layout-wrapper,
-        .skins-wrapper {
-          .ri-link {
-            .border-radiuses(5px, 0, 0, 0);
-            .vertical-gradient(darkgrey, @grayscale8);
-          }
-        }
-
-        .results-item.disabled {
-          border-color: #3a3a3a !important;
-
-          .opacity(20);
-
-          &:hover,
-          &:focus,
-          a:hover,
-          a:focus {
-            background: none !important;
-            cursor: default !important;
-          }
-        }
-
-        .results-item.selected .ri-link {
-          background: @galleryRISelectedBackground;
-          border-width: @galleryRISelectedBorderWidth;
-          border-style: @galleryRISelectedBorderStyle;
-          border-color: @galleryRISelectedBorderColor;
-          margin-bottom: -(@galleryRISelectedBorderWidth * 2);
-        }
-
-        .ri-wrapper {
-          .ri-utility {
-            height: @galleryRIUtilityHeight;
-            background: @grayscale9;
-
-            .border-radiuses(5px, 0, 0, 5px);
-          }
-
-          .portlet-thumb-gripper {
-            background: @galleryRIGripper;
-            cursor: move;
-            display: block;
-
-            span {
-              display: block;
-              height: 16px;
-              overflow: hidden;
-              visibility: hidden;
-              width: 16px;
-            }
-          }
-
-          .ri-titlebar {
-            color: @galleryRITitle;
-          }
-
-          .ri-description {
-            color: @galleryRIDescription;
-          }
-        }
-
-        .portlet-wrapper {
-          .ri-link {
-            color: @galleryRILink;
-            display: none;
-
-            .border-radiuses(5px, 0, 0, 0);
-            .vertical-gradient(darkgrey, @grayscale8);
-          }
-        }
-
-        .portlet-wrapper:hover,
-        .portlet-wrapper:focus {
-          .ri-link {
-            background: @galleryRILinkBackgroundHover;
-            display: block;
-            .vertical-gradient(#699bc4, #38678f);
-          }
-        }
-
-        .pager {
-          .pager-pagination {
-            color: @galleryPagerText;
-          }
-
-          .pager-button-up,
-          .pager-button-down {
-            background: @galleryPagerButtonBackground;
-            border: @galleryPagerButtonBorder;
-
-            .vertical-gradient(@galleryPagerButtonGradient1,@galleryPagerButtonGradient2);
-            .border-radius();
-          }
-
-          .pager-button-up:hover,
-          .pager-button-up:focus,
-          .pager-button-down:hover,
-          .pager-button-down:focus {
-            background: @galleryPagerBtnBackgroundHover;
-
-            .border(steelblue);
-            .vertical-gradient(#4d4d4d, #0d0d0d);
-          }
-
-          .fl-pager-disabled {
-            background: @grayscale10 !important;
-            cursor: default !important;
-            .border(@grayscale9) !important;
-
-            a {
-              cursor: default !important;
-            }
-          }
-        } // end .pager
-      } // end .results-wrapper
-    } // end .gallery-inner
-
-    .content-wrapper {
-      margin: 0 0 0 127px;
-      padding: 8px 0;
-      display: block;
-      height: 174px;
-    }
-
-    .content-filters-wrapper {
-      display: block;
-      height: 174px;
-      padding: 0;
-      position: relative;
-      width: 200px;
-    }
-
-    .content-results-wrapper {
-      margin: 0 0 0 220px;
-      display: block;
-      height: 172px;
-      padding: 0;
-    }
-
-    .column-inner {
-      position: relative;
-    }
-
-    .results-wrapper {
-      overflow: hidden;
-      padding-right: 1px;
-    }
-  } // end .up-gallery
-} // end .portal
-
-/**
- * Additional styles
- */
-
-/*
-------------------------------------
-  uPortal Gallery.
-------------------------------------
- * The gallery is a sliding drawer that provides interfaces for customizing the protal.
- */
-
-/* Gallery Layout
- * Includes Fluid layout overides.
- * Generally the overall layout should not need to be altered.
- * If needed, override these values on a per-skin basis by adding the overrides to portal.css within the desired skin folder.
- */
-.clear-float {
-  clear: both;
-}
-
-.up-gallery {
-  position: relative;
-}
-
-.up-gallery .content {
-  padding-right: 8px;
-}
-
-.up-gallery .content-pager-wrapper {
-  padding: 0;
-  width: 70px;
-  display: block;
-  height: 170px;
-}
-
-.up-gallery .skins .content-results-wrapper,
-.up-gallery .layouts .content-results-wrapper {
-  margin-left: 0;
-  margin-right: 0;
-}
-
-.up-gallery .fl-col-mixed2 .fl-col-main {
-  padding-left: 0;
-}
-
-.up-gallery .content .add-content,
-.up-gallery .content .use-content {
-  overflow-y: hidden;
-}
-
-/* Gallery Handle
- * Clickable handle that opens the drawer. Once open, the handle can be clicked to close the drawer.
- */
-.up-gallery .handle {
-  margin: 0;
-  padding: 0;
-  position: absolute;
-  bottom: -7px;
-  left: 0;
-  right: 0;
-  height: 7px;
-  clear: both;
-}
-
-.up-gallery .handle a {
-  width: 100px;
-  cursor: pointer;
-  font-size: 10px;
-  border-top: 0;
-  position: absolute;
-  top: 6px;
-  left: 0;
-  margin-left: 25px;
-}
-
-.up-gallery .handle a:hover {
-  text-decoration: none;
-}
-
-.up-gallery .handle a span {
-  text-transform: uppercase;
-  font-weight: bold;
-  padding: 1px 25px 2px 10px;
-  margin-right: 5px;
-  display: block;
-}
-
-/* Gallery Modal Loaders
- * Preloaders while the content loads, following the opening of the drawer.
- */
-.up-gallery .gallery-loader {
-  display: block;
-  margin: 7px 0 0 127px;
-  position: absolute;
-  inset: 0;
-  background-image: url("./common/images/gallery-content-preloader.gif");
-  background-position: 50% 50%;
-  background-repeat: no-repeat;
-}
-
-.up-gallery .gallery-loader span {
-  display: none;
-}
-
-/* Gallery Close Button
- * An explicit close button, that closes the drawer.
- */
-.up-gallery .close-button {
-  position: absolute;
-  left: 32px;
-  bottom: 5px;
-}
-
-/* Gallery Add/Use Portlet Filters
- * Search and category filters for the add portlet and use portlet views.
- */
-.up-gallery .portlet-search-form {
-  margin-bottom: 10px;
-}
-
-.up-gallery .portlet-search-form label,
-.up-gallery .portlet-search-form .portlet-search-submit {
-  display: none;
-}
-
-.up .up-gallery .portlet-search-form .portlet-search-input {
-  width: 157px;
-}
-
-.up-gallery .categories-column {
-  padding: 0;
-  clear: both;
-}
-
-.up-gallery .categories-column .categories-wrapper {
-  display: none;
-}
-
-.up-gallery .categories-column.active .categories-wrapper {
-  display: block;
-}
-
-.portal .up-gallery .categories-wrapper {
-  padding: 10px;
-}
-
-.up-gallery .categories-column h4 {
-  padding-bottom: 1px;
-  margin-bottom: 3px;
-  font-size: 10px;
-  text-transform: uppercase;
-}
-
-.up-gallery .categories ul,
-.up-gallery .categories li,
-.up-gallery .categories a {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  font-size: 10px;
-  text-decoration: none;
-}
-
-.up-gallery .categories li {
-  float: left;
-  padding: 1px 0 1px 2px;
-  text-align: left;
-  cursor: pointer;
-}
-
-.up-gallery .categories li::after {
-  content: ", ";
-}
-
-.up-gallery .categories li:last-child::after {
-  content: "";
-}
-
-.up-gallery .categories li.active a {
-  text-decoration: underline;
-}
-
-/* Gallery List Pager
- * Pagination controls for lists in the gallery.
- */
-.up-gallery .pager-button-up span,
-.up-gallery .pager-button-down span {
-  display: none;
-}
-
-.up-gallery .pager-pagination {
-  height: 38px;
-  margin: 2px 0;
-  font-size: 10px;
-}
-
-.up-gallery .pager-button-up-inner {
-  display: block;
-  height: 59px;
-  background: url("./common/images/gallery-pager-up-active.png") center 85%
-    no-repeat;
-}
-
-.up-gallery .pager-button-down-inner {
-  display: block;
-  height: 59px;
-  background: url("./common/images/gallery-pager-down-active.png") center 15%
-    no-repeat;
-}
-
-.up-gallery .pager-button-up.fl-pager-disabled .pager-button-up-inner {
-  background-image: url("./common/images/gallery-pager-up-inactive.png");
-}
-
-.up-gallery .pager-button-down.fl-pager-disabled .pager-button-down-inner {
-  background-image: url("./common/images/gallery-pager-down-inactive.png");
-}
-
-.up-gallery .pager-button-up,
-.up-gallery .pager-button-down {
-  cursor: pointer;
-  position: relative;
-  height: 62px;
-}
-
-/* Gallery Results List
- * General formatting for results lists (portlets, skins, and layouts).
- */
-.up-gallery .results-wrapper {
-  font-size: 10px;
-  position: relative;
-}
-
-.up-gallery .results-wrapper-inner {
-  padding: 0 5px;
-}
-
-.up-gallery .results-wrapper .results-list {
-  list-style: none;
-  padding: 0;
-  padding-top: 5px;
-  margin: 0;
-  position: relative;
-  width: 100%;
-  overflow: hidden;
-}
-
-.up-gallery .results-wrapper .results-list .results-item,
-.up-gallery .results-wrapper .results-list .result-item {
-  margin-right: 5px;
-  margin-bottom: 5px;
-}
-
-.up-gallery .results-wrapper .results-list li {
-  display: block;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  position: relative;
-  float: left;
-}
-
-.up-gallery .results-wrapper .results-list li .ri-wrapper {
-  padding: 0;
-  position: relative;
-}
-
-.up-gallery .results-wrapper .results-list .skins-wrapper .ri-link,
-.up-gallery .results-wrapper .results-list .layout-wrapper .ri-link {
-  display: block;
-  padding: 5px;
-}
-
-.up-gallery .results-wrapper .results-list .ri-link .ri-content {
-  overflow: hidden;
-}
-
-.up-gallery .results-wrapper a {
-  text-decoration: none;
-}
-
-.up-gallery .results-column.fl-col-main {
-  margin: 0 74px 0 0;
-  padding: 0;
-  position: relative;
-}
-
-.up-gallery .results-wrapper .pager-column.fl-col-side {
-  float: right;
-  width: 74px;
-  margin: 0;
-  padding: 0;
-}
-
-.up-gallery .ri-titlebar {
-  font-size: 11px;
-  font-weight: bold;
-  margin-bottom: 5px;
-}
-
-.up-gallery .ri-icon {
-  float: left;
-  margin-right: 5px;
-}
-
-.up-gallery .skins-wrapper .ri-icon {
-  margin-right: 0;
-}
-
-.up-gallery .ri-icon span {
-  visibility: hidden;
-}
-
-.up-gallery .ri-description {
-  clear: right;
-  display: inline;
-}
-
-/* Gallery Portlet List
- * The list of portlets for add and use.
- */
-.up-gallery .portlet-list li {
-  width: 32%;
-  height: 50%;
-}
-
-.up-gallery .portlet-list li .portlet-wrapper {
-  height: 80px;
-}
-
-.up-gallery .portlet-wrapper .ri-link {
-  position: absolute;
-  top: 0;
-  right: 0;
-  display: block;
-  cursor: pointer;
-  padding: 1px 8px;
-  text-align: center;
-}
-
-.up-gallery .portlet-wrapper .ri-icon {
-  width: 32px;
-  height: 32px;
-}
-
-.up-gallery .portlet-wrapper .ri-content {
-  padding: 5px;
-}
-
-/* Drag Handle */
-// .up-gallery .portlet-thumb-gripper {display: block; cursor: move;}
-// .up-gallery .portlet-thumb-gripper span {display: block; width: 16px; height: 16px; overflow: hidden; visibility: hidden;}
-
-/* IE7 adjustments */
-*:first-child + html .up-gallery .results-wrapper .portlet-list li {
-  width: 24%;
-}
-
-/* Gallery Skin List
- * The list of skins.
- */
-.up-gallery .skins-wrapper .skin-thumb {
-  width: 120px;
-  height: 70px;
-}
-
-/* Gallery Layout List
- * The list of page layouts.
- */
-.up-gallery .results-wrapper .layouts-list li {
-  width: 140px;
-  height: 50%;
-}
-
-.up-gallery .layout-wrapper .layout-thumb {
-  width: 27px;
-  height: 27px;
-}
-
-/* Gallery: Avatar */
-.portal .portlet.ui-draggable-dragging {
-  padding: 0;
-}
-
-.portlet.ui-draggable-dragging {
-  border: 1px solid #f68923;
-  border-radius: 5px;
-  -moz-border-radius-topright: 0;
-  border-top-right-radius: 0;
-  padding: 0;
-  margin: 0;
-  list-style: none;
-  box-shadow: 0 0 4px 0 #333;
-  background: #333;
-  position: relative;
-  background-image: linear-gradient(90deg, #000, #333);
-  background-image: -webkit-gradient(
-    linear,
-    0% 0%,
-    0% 100%,
-    from(#000),
-    to(#333)
-  );
-  height: 90px;
-  width: 270px;
-  overflow: hidden;
-  filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
-  filter: alpha(opacity=80);
-}
-
-.portlet.ui-draggable-dragging .portlet-wrapper {
-  overflow: hidden;
-}
-
-.portlet.ui-draggable-dragging .portlet-thumb-link {
-  position: absolute;
-  top: 0;
-  right: 0;
-  display: block;
-  color: #000;
-  text-decoration: none;
-  font-size: 10px;
-  padding: 0 8px;
-  text-align: center;
-  cursor: move;
-  background: #f68923;
-  background-image: linear-gradient(90deg, #f68923, @white);
-  background-image: -webkit-gradient(
-    linear,
-    0% 0%,
-    0% 100%,
-    from(#f68923),
-    to(@white)
-  );
-  height: 16px;
-  overflow: hidden;
-}
-
-.portlet.ui-draggable-dragging .portlet-thumb-gripper {
-  display: block;
-  background: #444 url("./common/images/gripper.png") 5px 0 no-repeat;
-  cursor: move;
-  -moz-border-radius-topleft: 5px;
-  border-top-left-radius: 5px;
-}
-
-.portlet.ui-draggable-dragging .portlet-thumb-gripper span {
-  display: block;
-  width: 16px;
-  height: 16px;
-  overflow: hidden;
-  visibility: hidden;
-}
-
-.portlet.ui-draggable-dragging .portlet-thumb-content {
-  padding: 0 8px;
-}
-
-.portlet.ui-draggable-dragging .portlet-thumb-titlebar {
-  padding: 5px 8px 3px;
-  font-size: 11px;
-  font-weight: bold;
-  color: #ddd;
-}
-
-.portlet.ui-draggable-dragging .portlet-thumb-icon {
-  float: left;
-  width: 37px;
-  height: 37px;
-}
-
-.portlet.ui-draggable-dragging .portlet-thumb-icon span {
-  visibility: hidden;
-}
-
-.portlet.ui-draggable-dragging .portlet-thumb-description {
-  color: #aaa;
-  padding: 0;
-  margin-left: 36px;
-  font-size: 10px;
-}
-
-/* Gallery: Drop Target */
-.portal .ui-droppable {
-  min-height: 100px;
-}
-
-.layout-draggable-drop-target {
-  display: none;
-  background: #f00;
-  padding: 5px;
-  height: 150px;
-  text-align: center;
-  margin-bottom: 1em;
-  border: 2px dotted #960000;
-  font-weight: bold;
-  color: #960000;
-}
-
-.layout-draggable-drop-target span {
-  display: block;
-  padding: 65px 5px 5px;
-}
-
-.layout-draggable-target-dropped {
-  border: 1px solid #ccc;
-  background: #efefef url("./common/images/loading.gif") 50% 50% no-repeat;
-}
-
-.layout-draggable-target-dropped span {
-  display: none;
-}
diff --git a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/grids.less b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/grids.less
deleted file mode 100644
index 79afb37420a..00000000000
--- a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/grids.less
+++ /dev/null
@@ -1,92 +0,0 @@
-/*
- * creates a list of percentages for generating @number of evenly sized columns
- * includes selectors to allow targeting: xs, sm, md, lg, and xl screensizes.
- * Screensizes are inherited from Bootstrap.
- */
-.fn-even-columns(@number-of-columns) when (@number-of-columns > 0) {
-  .fn-even-columns((@number-of-columns - 1)); // recursive iterator
-
-  .fn-set-width-column-for-size(@number-of-columns, xs);
-  .fn-set-width-column-for-size(@number-of-columns, sm);
-  .fn-set-width-column-for-size(@number-of-columns, md);
-  .fn-set-width-column-for-size(@number-of-columns, lg);
-
-  // On smaller than xs screen sizes all content should be full screen
-  @media (max-width: @screen-xs-max) {
-    .up-portlet-wrapper,
-    .fl-reorderer-dropMarker {
-      width: 100%;
-    }
-  }
-}
-
-/*
- * creates an percentage width for screens of a given screensize
- *
- * E.G.
- *  .fn-set-width-column-for-size(2, xs);
- *  // creates a `.up-col-xs-2 .up-portlet` selector
- *  // that applys 50% width, for bootstrap xs and larger screen sizes
- */
-.fn-set-width-column-for-size(@number-of-columns; @screen-size) {
-  @interpolate-media-query: "screen-@{screen-size}-min";
-
-  &.up-col-@{screen-size}-@{number-of-columns} {
-    .up-portlet-wrapper,
-    .fl-reorderer-dropMarker {
-      // required for drag and drop styling to work
-      @media (min-width: @@interpolate-media-query) {
-        width: percentage( (1/@number-of-columns) );
-      }
-    }
-  }
-}
-
-.up-grid {
-  /*
-   * Leverage css flex to make the height of all elements in the row match.
-   */
-  &.up-matching-height {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-
-    /*
-     * A grid layout which will always provide an absolute and constant width
-     * for portlet size, while allowing the number of columns presented to
-     * dynamically vary.
-     *
-     * E.G.
-     * <div class="up-grid up-matching-height up-constant-width-variable-columns">
-     *   <section class="up-portlet">...</section>
-     * </div>
-     */
-    &.up-constant-width-variable-columns .up-portlet {
-      width: @up-flex-constant-width;
-      max-width: 100%;
-    }
-
-    /*
-     * A grid layout which will always have a constant max number of portlets in
-     * a row.
-     *
-     * E.G.
-     * <div class="up-grid up-matching-height up-constant-columns up-col-xs-2 up-col-sm-3 up-col-md-4 up-col-lg-5">
-     *   <section class="up-portlet">...</section>
-     * </div>
-     */
-    &.up-constant-columns {
-      .fn-even-columns(6);
-
-      .up-portlet-wrapper-inner {
-        margin: 10px;
-        height: 100%;
-
-        .up-portlet-content-wrapper {
-          // total height of wrapper inner - titlebar height
-          height: calc(~"100% - 34px");
-        }
-      }
-    }
-  }
-}
diff --git a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/jsr-168.less b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/jsr-168.less
deleted file mode 100644
index a78d0f80dc2..00000000000
--- a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/jsr-168.less
+++ /dev/null
@@ -1,324 +0,0 @@
-///@import "../bootstrap/variables.less";
-
-/* variables */
-
-/* font vars */
-
-@dim-font-by-this-percentage: 10%;
-
-/* dropdown's which occur within portlet menu variables. */
-@dropdown-inside-of-menu-top: 0px;
-@dropdown-inside-of-menu-position: relative;
-@dropdown-inside-of-menu-margin: 0px;
-@dropdown-inside-of-menu-padding: 0px;
-@dropdown-inside-of-menu-shadow: none;
-@dropdown-inside-of-menu-list-style: none;
-@dropdown-inside-of-menu-border: none;
-@dropdown-inside-of-menu-width: 100%;
-
-/* dropdown which occurs stand alone */
-
-@stand-along-dropdown-float: left;
-@stand-along-dropdown-list-style: outside none none;
-@stand-along-dropdown-margin: 2px 0 0;
-@stand-along-dropdown-min-width: 160px;
-
-@stand-along-dropdown-padding:5px 0;
-@stand-along-dropdown-position: absolute;
-@stand-along-dropdown-text-align: left;
-@stand-along-dropdown-top: 100%;
-
-@stand-along-dropdown-box-shadow:0 6px 12px rgba(0, 0, 0, 0.176);
-
-@stand-along-dropdown-border:1px solid @dropdown-border;
-@stand-along-dropdown-background-clip: padding-box;
-@stand-along-dropdown-left: 0px;
-
-/* end defined vars */
-
-.portlet-font {
-  font-family: @font-family-base;
-  font-size: @font-size-base;
-  color: @text-color;
-  line-height: @line-height-base;
-}
-
-.portlet-font-dim {
-  color: lighten(@text-color, @dim-font-by-this-percentage);
-  font-family: @font-family-base;
-  font-size: @font-size-base;
-  line-height: @line-height-base;
-}
-
-/* extend seems more sensible than defining each mixin and css rule here */
-
-.portlet-msg-status {
-  // bootstrap api should be utilized as this is for progress bars, but one html class would be insufficient.
-}
-
-.portlet-msg-info {
-  &:extend(.alert,
-  .alert-info);
-}
-
-.portlet-msg-error {
-  &:extend(.alert,
-  .alert-danger);
-}
-
-.portlet-msg-alert {
-  &:extend(.alert,
-  .alert-warning);
-}
-
-.portlet-msg-success {
-  &:extend(.alert,
-  .alert-success);
-}
-
-/* table and section sections */
-
-.portlet-section-header,
-.portlet-table-header {
-  &:extend(h3);
-}
-
-.portlet-section-alternate,
-.portlet-table-alternate {
-  background: @table-bg-accent;
-}
-
-.portlet-section-selected,
-.portlet-table-selected {
-  background: @table-bg-active;
-}
-
-.portlet-section-subheader,
-.portlet-table-subheader {
-  &:extend(h4);
-}
-
-.portlet-section-footer,
-.portlet-table-footer {
-  &:extend(h5);
-}
-
-.portlet-section-text,
-.portlet-table-text {
-  color: @brand-info;
-}
-
-/* forms */
-
-.portlet-form-label {
-  &:extend(h3);
-}
-
-.portlet-form-input-field {
-  &:extend(.form-control);
-}
-
-.portlet-form-button {
-  &:extend(.btn);
-  .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
-
-  &:hover {
-    text-decoration: none;
-  }
-}
-
-.portlet-icon-label {
-  &:extend(label);
-}
-
-.portlet-form-field-label {
-  &:extend(label);
-}
-
-.portlet-form-field {
-  &:extend(.checkbox input[type="checkbox"],
-  .checkbox-inline input[type="checkbox"],
-  .radio input[type="radio"],
-  .radio-inline input[type="radio"]);
-}
-
-/* portlet menus */
-
-.portlet-menu {
-  &:extend(.nav);
-  &:extend(.nav-pills);
-  &:extend(.nav-stacked);
-
-  li.portlet-menu-item {
-    &:extend(.nav-stacked > li + li);
-    &:extend(.nav-stacked > li);
-    &:extend(.nav > li);
-
-    &.active,
-    .portlet-menu-item-selected {
-      &:hover,
-      &:focus {
-        background-color: @nav-pills-active-link-hover-bg;
-        color: @nav-pills-active-link-hover-color;
-        border-radius: @nav-pills-border-radius;
-
-        > a {
-          &:hover,
-          &:focus {
-            background: inherit;
-            color: @white;
-            border-radius: @nav-pills-border-radius;
-          }
-        }
-      }
-
-      > a {
-        background-color: @nav-pills-active-link-hover-bg;
-        color: @nav-pills-active-link-hover-color;
-      }
-    }
-
-    a {
-      border-radius: @nav-pills-border-radius;
-      display: block;
-      padding: @nav-link-padding;
-      position: relative;
-      text-decoration: none;
-      color: @link-color;
-
-      &:hover,
-      &:focus {
-        background-color: @navbar-default-bg;
-        color: @navbar-default-color;
-      }
-    }
-
-    .dropdown-menu,
-    .portlet-menu-cascade,
-    .portlet-menu-cascade-item-selected {
-      top: @dropdown-inside-of-menu-top;
-      position: @dropdown-inside-of-menu-position;
-      margin: @dropdown-inside-of-menu-margin;
-      padding: @dropdown-inside-of-menu-padding;
-      box-shadow: @dropdown-inside-of-menu-shadow;
-      list-style: @dropdown-inside-of-menu-list-style;
-      border: @dropdown-inside-of-menu-border;
-      width: @dropdown-inside-of-menu-width;
-      background: @dropdown-bg;
-      color: @dropdown-header-color;
-
-      li,
-      .portlet-menu-cascade-item {
-        a {
-          &.disabled {
-            color: @dropdown-link-disabled-color;
-          }
-
-          &:hover,
-          &.portlet-menu-item-hover,
-          &.portlet-menu-cascade-item-hover {
-            color: @navbar-default-link-hover-color;
-          }
-        }
-
-        &:active,
-        &.portlet-menu-cascade-item-selected {
-          background-color: @nav-pills-active-link-hover-bg;
-          color: @nav-pills-active-link-hover-color;
-
-          > a {
-            background-color: @nav-pills-active-link-hover-bg;
-            color: @nav-pills-active-link-hover-color;
-          }
-        }
-
-        .portlet-menu-item-hover-selected,
-        .portlet-menu-cascade-item-hover-selected {
-          background: @nav-pills-active-link-hover-bg !important;
-          color: @nav-pills-active-link-hover-color;
-
-          &:hover,
-          &:focus {
-            background-color: @nav-pills-active-link-hover-bg !important;
-            color: @nav-pills-active-link-hover-color;
-          }
-        }
-      }
-
-      .portlet-menu-separator,
-      .portlet-menu-cascade-separator {
-        &:extend(.divider);
-      }
-    }
-  }
-
-  .portlet-menu-description {
-    color: @brand-info;
-  }
-
-  .portlet-menu-caption {
-    &:extend(h3);
-  }
-}
-
-.dropdown-menu {
-  background-clip: @stand-along-dropdown-background-clip;
-  background: @dropdown-bg;
-  border: @stand-along-dropdown-border;
-  border-radius: @nav-pills-border-radius;
-  box-shadow: @stand-along-dropdown-box-shadow;
-  float: @stand-along-dropdown-float;
-  font-size: @font-size-base;
-  left: @stand-along-dropdown-left;
-  list-style: @stand-along-dropdown-list-style;
-  margin: @stand-along-dropdown-margin;
-  min-width: @stand-along-dropdown-min-width;
-  padding: @stand-along-dropdown-padding;
-  position: @stand-along-dropdown-position;
-  text-align: @stand-along-dropdown-text-align;
-  top: @stand-along-dropdown-top;
-  z-index: @zindex-dropdown;
-  color: @dropdown-header-color;
-
-  li {
-    a {
-      color: @dropdown-link-color;
-
-      &.disabled {
-        color: @dropdown-link-disabled-color;
-      }
-
-      &:hover,
-      &.portlet-menu-item-hover,
-      &.portlet-menu-cascade-item-hover {
-        background: @dropdown-link-hover-bg;
-        color: @dropdown-link-hover-color;
-      }
-    }
-
-    &:active {
-      background-color: @nav-pills-active-link-hover-bg;
-      color: @nav-pills-active-link-hover-color;
-
-      > a {
-        background-color: @nav-pills-active-link-hover-bg;
-        color: @nav-pills-active-link-hover-color;
-      }
-    }
-
-    .portlet-menu-item-hover-selected {
-      background: @nav-pills-active-link-hover-bg !important;
-      color: @nav-pills-active-link-hover-color;
-
-      &:hover,
-      &:focus {
-        background-color: @nav-pills-active-link-hover-bg !important;
-        color: @nav-pills-active-link-hover-color;
-      }
-    }
-  }
-
-  .portlet-menu-separator {
-    &:extend(.divider);
-  }
-}
diff --git a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/mixins.less b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/mixins.less
deleted file mode 100644
index 79f96f4ed32..00000000000
--- a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/mixins.less
+++ /dev/null
@@ -1,180 +0,0 @@
-/**
- * Licensed to Apereo under one or more contributor license
- * agreements. See the NOTICE file distributed with this work
- * for additional information regarding copyright ownership.
- * Apereo licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file
- * except in compliance with the License.  You may obtain a
- * copy of the License at the following location:
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-/*!
- * Useful CSS3 LESS Mixins
- * http://css-tricks.com/snippets/css/useful-css3-less-mixins/
- * Thanks for sharing, Chris Coyier.  (http://css-tricks.com/license/)
- */
-
-.text-shadow (@string: 0 1px 3px rgba(0, 0, 0, 0.25)) {
-  text-shadow: @string;
-}
-.box-shadow (@string) {
-  box-shadow: @string;
-}
-.drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
-  box-shadow: @x @y @blur @spread rgb(0 0 0 / @alpha);
-}
-.inner-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
-  box-shadow: inset @x @y @blur @spread rgb(0 0 0 / @alpha);
-}
-
-.box-sizing (@type: border-box) {
-  box-sizing: @type;
-}
-
-.border-radius (@radius: 5px) {
-  border-radius: @radius;
-  background-clip: padding;
-  background-clip: padding-box;
-  background-clip: padding-box;
-}
-.border-radiuses (@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
-  -moz-border-radius-topright: @topright;
-  -moz-border-radius-bottomright: @bottomright;
-  -moz-border-radius-bottomleft: @bottomleft;
-  -moz-border-radius-topleft: @topleft;
-  border-radius: @topleft @topright @bottomright @bottomleft;
-  background-clip: padding;
-  background-clip: padding-box;
-  background-clip: padding-box;
-}
-.border-radiuses-top (@top: 0) {
-  -moz-border-radius-topright: @top;
-  -moz-border-radius-topleft: @top;
-  border-top-right-radius: @top;
-  border-top-left-radius: @top;
-}
-.border-radiuses-bottom (@bottom: 0) {
-  -moz-border-radius-bottomright: @bottom;
-  -moz-border-radius-bottomleft: @bottom;
-  border-bottom-right-radius: @bottom;
-  border-bottom-left-radius: @bottom;
-}
-.border (@color: @grayscale3, @size: 1px) {
-  border: @size solid @color;
-}
-
-.opacity (@opacity: 0.5) {
-  -webkit-opacity: @opacity;
-  -moz-opacity: @opacity;
-  opacity: @opacity;
-}
-
-.vertical-gradient (@startColor: #eee, @endColor: white) {
-  background-color: @startColor;
-  background: -webkit-gradient(
-    linear,
-    left top,
-    left bottom,
-    from(@startColor),
-    to(@endColor)
-  );
-  background: linear-gradient(to top, @startColor, @endColor);
-}
-.horizontal-gradient (@startColor: #eee, @endColor: white) {
-  background-color: @startColor;
-  background-image: -webkit-gradient(
-    linear,
-    left top,
-    right top,
-    from(@startColor),
-    to(@endColor)
-  );
-  background-image: linear-gradient(to left, @startColor, @endColor);
-}
-
-.gradient(@background, @_) {
-  background-color: @background;
-}
-.gradient(@background, @gradient) when (@gradient = true) {
-  // Only applies solid background
-  #gradient > .vertical(darken(@background, 0), darken(@background, 10%), 0%, 100%);
-}
-
-.animation (@name, @duration: 300ms, @delay: 0, @ease: ease) {
-  animation: @name @duration @delay @ease;
-}
-
-.transition (@transition) {
-  transition: @transition;
-}
-.transform (@string) {
-  transform: @string;
-}
-.scale (@factor) {
-  transform: scale(@factor);
-}
-.rotate (@deg) {
-  transform: rotate(@deg);
-}
-.skew (@deg, @deg2) {
-  transform: skew(@deg, @deg2);
-}
-.translate (@x, @y:0) {
-  transform: translate(@x, @y);
-}
-.translate3d (@x, @y: 0, @z: 0) {
-  transform: translate3d(@x, @y, @z);
-}
-.perspective (@value: 1000) {
-  perspective: @value;
-}
-.transform-origin (@x:center, @y:center) {
-  transform-origin: @x @y;
-}
-
-.pretty-buttons(@color, @background, @text-shadow: none) {
-  .contrasted(lighten(@background, 5%), @light: @color);
-  #gradient > .vertical(lighten(@background, 5%), darken(@background, 10%), 0%, 100%);
-
-  border-color: darken(@background, 10%);
-  border-bottom-color: darken(@background, 20%);
-  text-shadow: @text-shadow;
-  .box-shadow(inset 0 1px 0 rgba(255, 255, 255, 0.1));
-
-  &:hover,
-  &:focus,
-  &:active,
-  &.active {
-    #gradient > .vertical(darken(@background, 0), darken(@background, 10%), 0%, 100%);
-
-    border-color: darken(@background, 20%);
-    color: @color;
-  }
-
-  &.disabled,
-  &[disabled],
-  fieldset[disabled] & {
-    &,
-    &:hover,
-    &:focus,
-    &:active,
-    &.active {
-      background-color: @background;
-      border-color: darken(@background, 5%);
-    }
-  }
-}
-
-.contrasted(@background-color, @dark: @contrasted-dark-default, @light: @contrasted-light-default, @threshold: @contrasted-lightness-threshold) {
-  background: @background-color;
-  color: contrast(@background-color, @dark, @light, @threshold);
-}
diff --git a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/variables.less b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/variables.less
deleted file mode 100644
index efde7a6972e..00000000000
--- a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/variables.less
+++ /dev/null
@@ -1,296 +0,0 @@
-/**
- * Licensed to Apereo under one or more contributor license
- * agreements. See the NOTICE file distributed with this work
- * for additional information regarding copyright ownership.
- * Apereo licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file
- * except in compliance with the License.  You may obtain a
- * copy of the License at the following location:
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-/* ==========================================================================
-   Variables
-   ========================================================================== */
-@white: #ffffff;
-@black: #000000;
-
-/*
- * Grayscale colors. 1 is lightest, 10 is darkest.
- */
-@grayscale1: #f5f5f5;
-@grayscale2: #e5e5e5;
-@grayscale3: #d8d8d8;
-@grayscale4: #cccccc;
-@grayscale5: #adadad;
-@grayscale6: #999999;
-@grayscale7: #8c8c8c;
-@grayscale8: #696969;
-@grayscale9: #404040;
-@grayscale10: #333333;
-
-/*
- * Primary color with 3 lightened shades and 3 darkened shades.
- *
- * The variable color1 is used by the DynamicRespondrSkin portlet.
- * 1) Do not change the variable name. It is used as a portlet preference variable name that users can override
- *    the value of.
- * 2) The value must be on the same line as the variable name and be terminated with a semicolon due to
- *    regex searches by skin manager.
- */
-@color1: #4065b0; // medium blue
-@color1-light: lighten(@color1, 10%);
-@color1-lighter: lighten(@color1, 25%);
-@color1-lightest: lighten(@color1, 50%);
-@color1-dark: darken(@color1, 10%);
-@color1-darker: darken(@color1, 25%);
-@color1-darkest: darken(@color1, 50%);
-
-/*
- * Secondary color with 3 lightened shades and 3 darkened shades.
- *
- * The variable color2 is used by the DynamicRespondrSkin portlet.
- * 1) Do not change the variable name. It is used as a portlet preference variable name that users can override
- *    the value of.
- * 2) The value must be on the same line as the variable name and be terminated with a semicolon due to
- *    regex searches by skin manager.
- */
-@color2: #f68923; // muted orange
-@color2-light: lighten(@color2, 10%);
-@color2-lighter: lighten(@color2, 25%);
-@color2-lightest: lighten(@color2, 50%);
-@color2-dark: darken(@color2, 10%);
-@color2-darker: darken(@color2, 25%);
-@color2-darkest: darken(@color2, 50%);
-
-/*
- * Link color with 1 lighter shade.
- *
- * The variable color3 is used by the DynamicRespondrSkin portlet.
- * 1) Do not change the variable name. It is used as a portlet preference variable name that users can override
- *    the value of.
- * 2) The value must be on the same line as the variable name and be terminated with a semicolon due to
- *    regex searches by skin manager.
- */
-@color3: #005aa9; // light muted blue
-@color3-light: lighten(@color3, 15%);
-@color3-dark: darken(@color3, 15%);
-
-/*
- * Footer text color with 1 lighter shade.
- *
- * The variable color4 is used by the DynamicRespondrSkin portlet.
- * 1) Do not change the variable name. It is used as a portlet preference variable name that users can override
- *    the value of.
- * 2) The value must be on the same line as the variable name and be terminated with a semicolon due to
- *    regex searches by skin manager.
- */
-@color4: #adadad; // light gray
-@color4-light: lighten(@color4, 15%);
-@color4-lighter: lighten(@color4, 30%);
-
-/*
- * Footer background color.
- *
- * The variable color5 is used by the DynamicRespondrSkin portlet.
- * 1) Do not change the variable name. It is used as a portlet preference variable name that users can override
- *    the value of.
- * 2) The value must be on the same line as the variable name and be terminated with a semicolon due to
- *    regex searches by skin manager.
- */
-@color5: #333333; // dark gray
-
-/*
- * Portlet border color.
- *
- * The variable color6 is used by the DynamicRespondrSkin portlet.
- * 1) Do not change the variable name. It is used as a portlet preference variable name that users can override
- *    the value of.
- * 2) The value must be on the same line as the variable name and be terminated with a semicolon due to
- *    regex searches by skin manager.
- */
-@color6: #e5e5e5; // lighter gray
-
-@border: 1px solid @grayscale2;
-
-/**
- * Link colors
- */
-@portal-link-color: @color3;
-@portal-link-hover-color: @color3-dark;
-
-/**
- * Off-canvas content Styles
- */
-@offcanvas-background-color: @grayscale10;
-
-/**
- * Main content Styles
- */
-@content-background-color: @white;
-
-/**
- * Region styles
- */
-@header-background-color: @color1;
-@header-text-color: @white;
-@header-link-color: @white;
-
-@footer-background-color: @color5;
-@footer-secondary-background-color: lighten(@color5, 10%);
-@footer-text-color: @color4-light;
-@footer-link-color: @color4-lighter;
-@footer-link-hover-color: @white;
-
-/**
- * Page-level styles
- */
-@body-background-color: @footer-secondary-background-color; // default to match footer-second;  prevents 'gaps' at the bottom of short pages
-@body-background-image: none;
-@portal-page-body-background-image: url("./common/images/furley_bg.png"); // Using the furley pattern from http://subtlepatterns.com
-@portal-page-body-background-image-filter: none; // for full list of filter effects see: https://developer.mozilla.org/en-US/docs/Web/CSS/filter
-
-/**
- * User bar styles
- */
-@portal-global-background-color: @color1;
-@portal-global-background-gradient: false;
-@portal-global-border-color: @color1-light;
-
-/**
- * Theme based button styles
- */
-@btn-skin-text-color: @white;
-@btn-skin-background-color: @color2;
-
-@btn-skin-alt-text-color: @grayscale10;
-@btn-skin-alt-background-color: @color3;
-
-/**
- * Nav
- */
-@mobile-navbar-top-position: -148px; /* Active only on mobile : if you need to custumize region header height (big banner, small logo etc.), you need to modify this value. default is -148px. */
-
-@mobile-navbar-item-active-background-color: @color1;
-@mobile-navbar-item-active-text-color: @white;
-@mobile-navbar-item-background-color: @offcanvas-background-color;
-@mobile-navbar-flyout-item-active-hover-text-color: @white;
-
-@navbar-background-color: @color1-dark;
-@navbar-border-color: transparent;
-@navbar-border-size: 0;
-
-@navbar-item-background-color: transparent;
-@navbar-item-text-color: @grayscale3;
-
-@navbar-item-font-weight: bold;
-
-@navbar-item-hover-text-color: lighten(@navbar-item-text-color, 50%);
-@navbar-item-hover-background-color: @color1-light;
-
-@navbar-item-active-background-color: @color1-darker;
-@navbar-item-active-hover-background-color: lighten(
-  @navbar-item-active-background-color,
-  50%
-);
-
-@navbar-item-active-text-color: @white;
-@navbar-item-active-hover-text-color: inherit;
-
-@navbar-controls-color: @white;
-@navbar-controls-hover-color: @white;
-
-@menu-toggle-background-color: @color1-dark;
-@menu-toggle-border-color: @color1-darker;
-@menu-toggle-text-color: @white;
-
-@menu-toggle-hover-background-color: @color1-light;
-@menu-toggle-hover-border-color: @color1-lighter;
-@menu-toggle-hover-text-color: @white;
-
-/**
- * Tab Groups
- */
-@tabgroup-background-color: @color2;
-
-@tabgroup-item-background-color: transparent;
-@tabgroup-item-text-color: @grayscale3;
-
-@tabgroup-item-hover-text-color: lighten(@navbar-item-text-color, 50%);
-@tabgroup-item-hover-background-color: @color1-light;
-
-@tabgroup-item-active-background-color: @color1-darker;
-@tabgroup-item-active-text-color: @white;
-
-@tabgroup-item-active-hover-background-color: lighten(
-  @tabgroup-item-active-background-color,
-  50%
-);
-@tabgroup-item-active-hover-text-color: inherit;
-
-/**
- * Search field
- */
-@search-button-text-color: @white;
-@search-button-background-color: @color2;
-
-/**
- * Portlet Chrome Settings
- */
-@portlet-border-color: @color6;
-@portlet-border-radius: 5px;
-@portlet-header-border-color: @color6;
-
-@portlet-titlebar-link-color: @grayscale10;
-@portlet-titlebar-background-color: @grayscale2;
-
-@portlet-options-link-color: @grayscale10;
-@portlet-options-link-hover-color: darken(@portlet-options-link-color, 20%);
-
-/**
- * Detached Header (aka sticky header) styles
- */
-@detached-header-link-color: @grayscale4;
-@detached-header-backbround-color: @color1;
-@detached-header-height: 30px;
-
-/*
- * Custom Mixins Settings
- */
-@contrasted-dark-default: @grayscale10;
-@contrasted-light-default: @grayscale2;
-@contrasted-lightness-threshold: 43%;
-
-/**
- * Custom colors for rating component
- */
-@rating-selected-color: gold;
-
-// Size for absolute width flex column
-@up-flex-constant-width: 20rem;
-
-/*
- * Simple float. Pass in the direction; default is left.
- */
-
-.float (@direction: left) {
-  float: @direction;
-}
-
-/*
- * Base formatting for converting a block-list to an inline-list.
- */
-
-.inline-block-list {
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
diff --git a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/views.less b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/views.less
deleted file mode 100644
index 070c776d520..00000000000
--- a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/views.less
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * View styles targeting a single specific view within uPortal
- */
-
-@import "views/activity.less";
-@import "views/googleAnalytics.less";
-@import "views/sitemap.less";
diff --git a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/common.scss b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/common.scss
new file mode 100644
index 00000000000..67f9d3feb23
--- /dev/null
+++ b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/common.scss
@@ -0,0 +1,656 @@
+/**
+ * Licensed to Apereo under one or more contributor license
+ * agreements. See the NOTICE file distributed with this work
+ * for additional information regarding copyright ownership.
+ * Apereo licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file
+ * except in compliance with the License.  You may obtain a
+ * copy of the License at the following location:
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+
+/* ==========================================================================*
+    Bootstrap 5
+    ========================================================================== */
+
+/*
+ * Import Bootstrap 5 SCSS from webjars
+ */
+@import "bootstrap";
+
+/* Reset root font-size to match Bootstrap 3 behavior */
+html {
+  font-size: 10px;
+}
+
+body {
+  font-size: 14px;
+}
+
+/* ==========================================================================
+   Variables
+   ========================================================================== */
+@import "variables";
+
+/* ==========================================================================
+   Utility mixins
+   ========================================================================== */
+@import "mixins";
+
+/* ==========================================================================
+   Regions
+   ========================================================================== */
+@import "regions";
+
+/* ==========================================================================
+   Gallery
+   ========================================================================== */
+@import "gallery";
+
+/* ==========================================================================
+   Native Tags
+   ========================================================================== */
+@import "tags";
+
+/* ==========================================================================
+   Namespace: .portal
+   ========================================================================== */
+
+/*
+ * Everything in this stylesheet is scoped (nested) within ".portal".
+ * As a best practice, anything added to this stylesheet (that is not a variable
+ * or mixin) should also be scoped within the namespace.
+ */
+
+.portal {
+  /*
+   * Using the Google Font "Oxygen" as the base font.
+   * Font is currently being included in the markup.
+   */
+
+  // font-family: 'Oxygen', sans-serif;
+
+  /* ==========================================================================
+     Header
+     ========================================================================== */
+  @import "header";
+
+  /* ==========================================================================
+     Navigation
+     ========================================================================== */
+  @import "navigation";
+
+  /* ==========================================================================
+     Content
+     ========================================================================== */
+  @import "content";
+
+  /* ==========================================================================
+     Portlet
+     ========================================================================== */
+  @import "portlet";
+
+  /* ==========================================================================
+     Portlets without chrome
+     ========================================================================== */
+  @import "no-chrome";
+
+  /* ==========================================================================
+     Personalization
+     ========================================================================== */
+  @import "personalization";
+
+  /* ==========================================================================
+     Portlet Config
+     ========================================================================== */
+  @import "portlet-manager";
+
+  /* ==========================================================================
+     Portal Administration
+     ========================================================================== */
+  @import "portal-admin";
+
+  /* ==========================================================================
+     Rating
+     ========================================================================== */
+  @import "rating";
+
+  /* ==========================================================================
+     Search
+     ========================================================================== */
+  @import "search";
+
+  /* ==========================================================================
+     Entity Selector
+     ========================================================================== */
+  @import "entity-selector";
+
+  /* ==========================================================================
+     Footer
+     ========================================================================== */
+  @import "footer";
+
+  /* ==========================================================================
+     Fluid stop-gap file - This will be removed when Universality and Fluid Components are EOL
+     ========================================================================== */
+  @import "fluid_stopgap";
+
+  /* ==========================================================================
+     JSR 168 and JSR 268 css.
+     ========================================================================== */
+  @import "jsr-168";
+
+  /* ==========================================================================
+     View styles targeting a single specific view within uPortal.
+     ========================================================================== */
+  @import "views";
+
+  /* ==========================================================================
+     Plain css flex and grid layouts.
+     ========================================================================== */
+  @import "grids";
+
+  /* ==========================================================================
+     Fragment Permissions
+     ========================================================================== */
+  @import "fragment-permissions";
+
+  /* ==========================================================================
+     jQuery UI Dialog Fixes
+     ========================================================================== */
+  // Note: Close button styling reverted due to hover state and icon positioning issues
+}
+  /* ==========================================================================
+     User Administration Form Fixes
+     ========================================================================== */
+  
+  // Fix form control sizing to match Bootstrap 3 behavior
+  .form-control {
+    height: 34px;
+    padding: 6px 12px;
+    font-size: 14px;
+    line-height: 1.42857143;
+  }
+  
+  // Fix column padding to match Bootstrap 3 grid
+  .col-md-6 {
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+  
+  // Fix button styling to match Bootstrap 3 behavior
+  .btn {
+    height: 34px;
+    padding: 6px 12px;
+    font-size: 14px;
+    line-height: 20px;
+    border-radius: 4px;
+    background-color: #efefef;
+    color: #696969;
+  }
+  
+  // Fix DataTables filtering and pagination styling
+  .view-filter {
+    padding: 15px;
+    margin: 0px -15px 20px;
+    border-radius: 4px;
+  }
+  
+  .dataTables-inline.dataTables-right {
+    display: inline-block;
+  }
+  
+  .dataTables_length select {
+    height: 20px;
+    padding: 0px;
+    font-size: 14px;
+    border: 1px solid #767676;
+    border-radius: 0px;
+    background-color: #ffffff;
+  }
+  
+  /* Permission lookup form styling fixes */
+  .permission-lookup {
+    .form-control {
+      height: 34px;
+      padding: 6px 12px;
+      font-size: 14px;
+      line-height: 20px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+    }
+    
+    .btn {
+      height: 34px;
+      padding: 6px 12px;
+      font-size: 14px;
+      line-height: 20px;
+      border-radius: 4px;
+    }
+    
+    .btn-primary {
+      border: 1px solid #2e6da4;
+    }
+  }
+  
+  /* Import/Export portlet button styling fixes */
+  .imp-exp {
+    .btn {
+      font-size: 14px;
+      line-height: 20px;
+      border-radius: 4px;
+    }
+    
+    .btn-group .btn {
+      height: 36px;
+      padding: 0px 5px;
+      color: #333;
+    }
+    
+    .btn-group .btn:first-child {
+      border-radius: 4px 0px 0px 4px;
+    }
+    
+    .btn-group .btn:last-child {
+      border-radius: 0px 4px 4px 0px;
+    }
+    
+    .btn-primary,
+    .btn-success,
+    .btn-danger,
+    .btn-warning,
+    .btn-default {
+      height: 34px;
+      padding: 6px 12px;
+    }
+    
+    .btn-default {
+      background-color: #fff;
+      border: 1px solid #ccc;
+      color: #333;
+    }
+    
+    .btn-warning {
+      background-color: #f0ad4e;
+      border: 1px solid #eea236;
+      color: #fff;
+    }
+    
+    .btn-success {
+      background-color: #5cb85c;
+      border: 1px solid #4cae4c;
+      color: #fff;
+    }
+    
+    .btn-danger {
+      background-color: #d9534f;
+      border: 1px solid #d43f3a;
+      color: #fff;
+    }
+  }
+  
+  /* Permission lookup form layout and styling fixes */
+  .permission-lookup form {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+    
+    .principal-input,
+    .activity-input {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+    }
+    
+    .form-label {
+      margin-bottom: 0;
+      white-space: nowrap;
+    }
+    
+    .btn-primary {
+      background-color: #337ab7;
+      border-color: #2e6da4;
+      color: #fff;
+    }
+    
+    .punctuation {
+      font-weight: bold;
+      margin: 0 4px;
+    }
+  }
+  
+  /* Fragment admin dropdown styling fixes */
+  #fragmentOwner {
+    width: 224px;
+    display: inline-block;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+  
+  /* Portlet options menu button styling fixes */
+  .portlet-options-menu .btn {
+    background-color: transparent;
+  }
+  
+  /* Panel list and card list button styling fixes */
+  .panel-list .btn-primary,
+  .card-list .btn-primary {
+    background-color: #337ab7;
+    border-color: #2e6da4;
+    color: #fff;
+  }
+  
+  /* Global primary button styling fixes */
+  .btn-primary {
+    background-color: #337ab7;
+    border-color: #2e6da4;
+    color: #fff;
+  }
+  
+  /* Logout button styling fixes */
+  .portal-logout.btn {
+    background-color: transparent;
+    padding: 1px 5px;
+    font-size: 12px;
+  }
+  
+  /* View filter and DataTables layout fixes */
+  .view-filter {
+    display: block;
+    flex-wrap: nowrap;
+  }
+  
+  .dataTables-inline.dataTables-right {
+    display: inline-block;
+    float: none;
+    width: auto;
+  }
+  
+  .dataTables-inline.dataTables-left {
+    display: block;
+    float: left;
+    width: auto;
+  }
+  
+  /* Alert info background color fix */
+  .alert-info {
+    background-color: #d9edf7;
+    border-color: #bce8f1;
+    color: #31708f;
+  }
+  
+  /* DataTables pagination styling fixes */
+  .dataTables_length select {
+    width: auto;
+    height: 20px;
+    padding: 0px;
+    font-size: 14px;
+    border: 1px solid #767676;
+    border-radius: 0px;
+    background-color: #ffffff;
+    vertical-align: baseline;
+  }
+  
+  .pagination .page-link {
+    background-color: transparent;
+    border: none;
+    color: #337ab7;
+    padding: 3px 6px;
+  }
+  
+  .pagination .page-item.active .page-link {
+    background-color: transparent;
+    border: none;
+    color: #000;
+    font-weight: bold;
+  }
+  
+  .pagination .page-item.disabled .page-link {
+    background-color: transparent;
+    border: none;
+    color: #999;
+  }
+  
+
+  
+  /* Badge styling fixes - Bootstrap 5 compatibility */
+  .badge {
+    display: inline-block;
+    padding: 3px 7px;
+    font-size: 12px;
+    font-weight: bold;
+    line-height: 1;
+    color: #fff;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: baseline;
+    border-radius: 10px;
+    background-color: #777; /* Default gray background like Bootstrap 3 */
+  }
+  
+  .badge:empty {
+    display: none;
+  }
+  
+  /* Badge color variants */
+  .badge.badge-primary {
+    background-color: #337ab7;
+  }
+  
+  .badge.badge-success {
+    background-color: #5cb85c;
+  }
+  
+  .badge.badge-info {
+    background-color: #5bc0de;
+  }
+  
+  .badge.badge-warning {
+    background-color: #f0ad4e;
+  }
+  
+  .badge.badge-danger {
+    background-color: #d9534f;
+  }
+  
+  /* Badge in buttons */
+  .btn .badge {
+    position: relative;
+    top: -1px;
+  }
+  
+  /* Badge hover states for links */
+  a.badge:hover,
+  a.badge:focus {
+    color: #fff;
+    text-decoration: none;
+    cursor: pointer;
+  }
+  
+  /* Portlet controls fixes - Bootstrap 5 compatibility */
+  .grab-handle.hidden {
+    display: none !important;
+  }
+  
+  /* Remove unwanted Bootstrap 5 dropdown caret */
+  .portlet-options-menu .dropdown-toggle::after {
+    display: none;
+  }
+  
+  /* Ensure dropdown functionality works */
+  .portlet-options-menu .dropdown-menu {
+    position: absolute;
+    z-index: 1000;
+  }
+  
+  /* Fix z-index layering - Vue component overlaying controls */
+  .up-portlet-titlebar {
+    position: relative;
+    z-index: 10;
+  }
+  
+  .portlet-controls {
+    position: relative;
+    z-index: 20;
+  }
+  
+  .portlet-options-menu {
+    position: relative;
+    z-index: 30;
+  }
+  
+  /* Ensure Vue components don't overlay portlet controls */
+  esco-content-grid {
+    position: relative;
+    z-index: 1;
+  }
+  
+  /* Portlet options dropdown menu styling - Bootstrap 3 compatibility */
+  .portlet-options-menu .dropdown-menu {
+    border-radius: 4px;
+    padding: 5px 0;
+    font-size: 14px;
+    min-width: 160px;
+  }
+  
+  .portlet-options-menu .dropdown-menu li {
+    display: list-item;
+    padding: 0;
+    margin: 0;
+  }
+  
+  .portlet-options-menu .dropdown-menu li a {
+    display: block;
+    padding: 3px 20px;
+    color: #333;
+    text-decoration: none;
+    background: transparent;
+  }
+  
+  .portlet-options-menu .dropdown-menu li a:hover,
+  .portlet-options-menu .dropdown-menu li a:focus {
+    background-color: #f5f5f5;
+    color: #262626;
+  }
+  
+  /* Welcome fragment fixes - Bootstrap 5 compatibility */
+  
+  /* 1. Fix portlet font to match Bootstrap 3 */
+  .portal .portlet-font {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
+    font-size: 14px !important;
+    color: #333333 !important;
+    line-height: 1.42857143 !important;
+  }
+  
+  /* 2. Fix button styling - Bootstrap 3 behavior */
+  .btn-default {
+    background-color: #fff !important;
+    border-color: #ccc !important;
+    color: #333 !important;
+  }
+  
+  .btn-default:hover,
+  .btn-default:focus {
+    background-color: #e6e6e6 !important;
+    border-color: #adadad !important;
+    color: #333 !important;
+  }
+  
+  /* 3. Fix My Drives portlet width restriction */
+  .up-portlet-content {
+    width: 100% !important;
+    max-width: none !important;
+  }
+  
+  .up-portlet-content .container,
+  .up-portlet-content .container-fluid {
+    width: 100% !important;
+    max-width: none !important;
+    padding-left: 15px !important;
+    padding-right: 15px !important;
+  }
+  
+  /* Fix My Drives portlet - restore clearfix for .fl-fix and .row */
+  .fl-fix::before,
+  .fl-fix::after {
+    content: " ";
+    display: table;
+  }
+  
+  .fl-fix::after {
+    clear: both;
+  }
+  
+  /* Override Bootstrap 5 flexbox for specific portlet toolbars */
+  #toolbar.row {
+    display: block !important;
+  }
+  
+  #toolbar.row::before,
+  #toolbar.row::after {
+    content: " ";
+    display: table;
+  }
+  
+  #toolbar.row::after {
+    clear: both;
+  }
+  
+  /* Fix Fluid Framework layout classes for My Drives portlet */
+  .fl-col-flex2 {
+    display: block !important;
+    width: 100%;
+  }
+  
+  .fl-col-flex2::before,
+  .fl-col-flex2::after {
+    content: " ";
+    display: table;
+  }
+  
+  .fl-col-flex2::after {
+    clear: both;
+  }
+  
+  .fl-force-left {
+    float: left !important;
+  }
+  
+  .fl-force-right {
+    float: right !important;
+    width: calc(100% - 33.333333%) !important; /* Take remaining space after col-md-4 */
+  }
+  
+  /* Ensure browser area takes full remaining width within portlets */
+  .up-portlet-content #browserArea.fl-force-right {
+    width: calc(100% - 33.333333%) !important; /* Match toolbar width */
+  }
+  
+  /* Fix My Drives portlet content area width to match toolbar */
+  .fl-col-flex2.row {
+    width: calc(100% + 15px) !important;
+  }
+  
+  /* Bootstrap 5 modal close button styling */
+  .btn-close {
+    width: 1em;
+    height: 1em;
+    padding: 0.25em;
+    color: #000;
+    background: transparent;
+    border: 0;
+    border-radius: 0.25rem;
+    opacity: 1;
+  }
+  
diff --git a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/content.less b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/content.scss
similarity index 64%
rename from uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/content.less
rename to uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/content.scss
index f70677b3427..20f6a14ae42 100644
--- a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/content.less
+++ b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/content.scss
@@ -16,10 +16,10 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-@portletWrapperBorderRadius: 5px;
+$portletWrapperBorderRadius: 5px;
 
 #portalPageBody {
-  background-color: @content-background-color;
+  background-color: $content-background-color;
   min-height: 300px;
 
   /* Need for the offcanvas open effect */
@@ -41,8 +41,8 @@
     background-size: cover;
 
     // add image and filter(s)
-    background-image: @portal-page-body-background-image;
-    filter: @portal-page-body-background-image-filter;
+    background-image: $portal-page-body-background-image;
+    filter: $portal-page-body-background-image-filter;
   }
 
   .portal-page-column {
@@ -60,22 +60,22 @@
 #portalPageBodyMessage {
   display: none;
   margin-bottom: 1em;
-  .border-radius(7px);
+  @include border-radius(7px);
 }
 
 #portalPageBodyMessage.error {
-  background-color: @color2-lighter;
-  .border(@color2-dark);
+  background-color: $color2-lighter;
+  @include border($color2-dark);
 }
 
 #portalPageBodyMessage.warn {
-  background-color: @color2-lighter;
-  .border(@color2-dark);
+  background-color: $color2-lighter;
+  @include border($color2-dark);
 }
 
 #portalPageBodyMessage.success {
-  background-color: @color2-lighter;
-  .border(@color2-dark);
+  background-color: $color2-lighter;
+  @include border($color2-dark);
 }
 
 #portalPageBodyMessage p {
@@ -90,15 +90,13 @@
 }
 
 .portlet-title {
-  .border-radiuses-top(5px);
+  @include border-radiuses-top(5px);
 
   /* title text */
   & > a {
     display: block;
     width: 80%; // fallback for browsers that don't support calc
-    width: calc(
-      ~"100% - 85px"
-    ); // tilde is used to escape string, preventing less from mangling math
+    width: calc(100% - 85px);
 
     overflow: hidden;
     text-overflow: ellipsis;
@@ -106,20 +104,20 @@
 }
 
 .portlet-content {
-  color: @grayscale8;
+  color: $grayscale8;
   padding: 0 20px 20px;
 }
 
 .borderless {
-  background: @grayscale10;
-  border-color: @black;
+  background: $grayscale10;
+  border-color: $black;
 
   .portlet-header {
     display: none;
   }
 
   .portlet-content {
-    color: @grayscale2;
+    color: $grayscale2;
     padding: 20px;
   }
 }
@@ -145,12 +143,12 @@ section h4 {
 }
 
 .up-portlet-titlebar.up-standard-chrome {
-  background-color: @portlet-titlebar-background-color; /* Old browsers */
+  background-color: $portlet-titlebar-background-color; /* Old browsers */
   position: relative;
 
-  #gradient > .vertical(lighten(@portlet-titlebar-background-color, 5%), darken(@portlet-titlebar-background-color, 10%), 0%, 100%);
-  .border(@portlet-header-border-color);
-  .border-radiuses-top(@portlet-border-radius);
+  background: linear-gradient(to bottom, lighten($portlet-titlebar-background-color, 5%), darken($portlet-titlebar-background-color, 10%));
+  @include border($portlet-header-border-color);
+  @include border-radiuses-top($portlet-border-radius);
 
   border-bottom: none;
 
@@ -162,10 +160,10 @@ section h4 {
     line-height: 20px;
 
     > a {
-      color: @portlet-titlebar-link-color;
+      color: $portlet-titlebar-link-color;
 
       &:hover {
-        color: darken(@portlet-titlebar-link-color, 20%);
+        color: darken($portlet-titlebar-link-color, 20%);
       }
     }
   }
@@ -176,21 +174,41 @@ section h4 {
     right: 0;
     margin: 0;
 
-    .portlet-options-menu > a {
-      color: @portlet-options-link-color;
-      font-weight: normal;
-      padding: 9px;
-      padding-right: 15px;
+    .portlet-options-menu {
+      font-size: 14px;
+      
+      > a {
+        color: $portlet-options-link-color;
+        font-weight: normal;
+        padding: 9px;
+        padding-right: 15px;
+        font-size: 14px;
+        text-decoration: none;
 
-      .caret {
-        border-top-color: @portlet-options-link-color;
-      }
+        .caret {
+          border-top-color: $portlet-options-link-color;
+        }
 
-      &:hover {
-        color: @portlet-options-link-hover-color;
+        &:hover {
+          color: $portlet-options-link-hover-color;
+          text-decoration: none;
 
-        .caret {
-          border-top-color: @portlet-options-link-hover-color;
+          .caret {
+            border-top-color: $portlet-options-link-hover-color;
+          }
+        }
+      }
+      
+      .dropdown-menu {
+        font-size: 14px;
+        
+        li {
+          padding: 3px 20px;
+        }
+        
+        a {
+          font-size: 14px;
+          padding: 3px 0;
         }
       }
     }
@@ -206,17 +224,23 @@ section h4 {
       top: 3px;
       font-size: 18px;
       margin-left: 3px;
+      
+      &.hidden {
+        display: none;
+      }
     }
   }
 }
 
 .up-portlet-content-wrapper {
-  background-color: @white;
+  background-color: $white;
   overflow: hidden;
   padding: 10px;
+  position: relative;
+  z-index: 1;
 
-  .border(@portlet-border-color);
-  .border-radiuses-bottom(@portletWrapperBorderRadius);
+  @include border($portlet-border-color);
+  @include border-radiuses-bottom($portletWrapperBorderRadius);
 
   border-top: none;
 
@@ -228,16 +252,16 @@ section h4 {
 .btn-skin,
 a.btn-skin,
 button.btn-skin {
-  .pretty-buttons(@btn-skin-text-color, @btn-skin-background-color);
+  @include pretty-buttons($btn-skin-text-color, $btn-skin-background-color);
 }
 
 .btn-skin-alt,
 a.btn-skin-alt,
 button.btn-skin-alt {
-  .pretty-buttons(@btn-skin-alt-text-color, @btn-skin-alt-background-color);
+  @include pretty-buttons($btn-skin-alt-text-color, $btn-skin-alt-background-color);
 
   .btn-link {
-    color: @btn-skin-alt-text-color;
+    color: $btn-skin-alt-text-color;
   }
 }
 
@@ -246,16 +270,16 @@ button.btn-skin-alt {
 }
 
 #portal-sticky-header {
-  margin-top: @detached-header-height;
+  margin-top: $detached-header-height;
 
   .navbar {
-    background: @detached-header-backbround-color;
-    min-height: @detached-header-height;
-    max-height: @detached-header-height;
+    background: $detached-header-backbround-color;
+    min-height: $detached-header-height;
+    max-height: $detached-header-height;
     padding-top: 5px;
 
     a {
-      color: @detached-header-link-color;
+      color: $detached-header-link-color;
     }
 
     .navbar-header {
@@ -311,7 +335,7 @@ section.emergency-alert {
 * When the screen size is larger than small screen size
 */
 
-@media only screen and (min-width: @screen-sm-min) {
+@media only screen and (min-width: 576px) {
   #portalTip,
   #region-customize {
     display: block;
@@ -319,38 +343,38 @@ section.emergency-alert {
 
   .portlet {
     margin-bottom: 10px;
-    .border-radius;
+    @include border-radius;
   }
 }
 
 /* large screens show all 6 columns. */
-@media only screen and (min-width: @screen-sm-min) {
+@media only screen and (min-width: 576px) {
   .portal-page-column.col-md-2 {
-    width: percentage( (1/6) );
+    width: percentage(1/6);
     float: left;
   }
 }
 
-@media only screen and (max-width: @screen-xs-max) {
+@media only screen and (max-width: 575px) {
   /* collapse from 6 to 3 columns */
   .portal-page-column.col-md-2 {
-    width: percentage( (1/3) );
+    width: percentage(1/3);
     float: left;
   }
 }
 
 // average between small and extra small
-@media only screen and (max-width: (@screen-xs-max + @screen-xs-min) / 2) {
+@media only screen and (max-width: 400px) {
   /* collapse from 6 to 2 columns */
   .portal-page-column.col-md-2 {
-    width: percentage( (1/2) );
+    width: percentage(1/2);
     float: left;
   }
 }
 
-@media only screen and (max-width: @screen-xs-min / 2) {
+@media only screen and (max-width: 200px) {
   /* on really small screen collapse to a single column */
   .portal-page-column.col-md-2 {
-    width: percentage( (1/1) );
+    width: percentage(1/1);
   }
-}
+}
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/entity-selector.less b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/entity-selector.scss
similarity index 95%
rename from uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/entity-selector.less
rename to uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/entity-selector.scss
index 59633a4bf1e..93c4a9fcdd4 100644
--- a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/entity-selector.less
+++ b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/entity-selector.scss
@@ -28,12 +28,12 @@
   }
 
   .portlet-selection {
-    border: 1px solid @grayscale4;
+    border: 1px solid $grayscale4;
 
     .titlebar {
       background-color: #f8f8f8;
       padding: 8px 8px 6px;
-      border-bottom: 2px solid @grayscale4;
+      border-bottom: 2px solid $grayscale4;
       margin-bottom: 0;
       position: relative;
     }
@@ -110,7 +110,7 @@
     .breadcrumb-link {
       margin-bottom: 1em;
       font-size: 80%;
-      color: @grayscale4;
+      color: $grayscale4;
 
       .separator {
         font-size: 90%;
@@ -129,13 +129,13 @@
       }
 
       .title {
-        color: @grayscale4;
+        color: $grayscale4;
         font-size: 77%;
         display: inline;
       }
 
       .breadcrumbs {
-        color: @grayscale4;
+        color: $grayscale4;
         font-size: 77%;
         display: inline;
 
@@ -158,7 +158,7 @@
 
     .titlebar {
       background-color: #f8f8f8;
-      border: 1px solid @grayscale4;
+      border: 1px solid $grayscale4;
       padding: 8px 8px 6px;
       margin-bottom: 0;
       position: relative;
@@ -190,7 +190,7 @@
 
     .content {
       padding: 8px 8px 12px;
-      border: 1px solid @grayscale4;
+      border: 1px solid $grayscale4;
 
       .title {
         padding-top: 0.1em;
@@ -285,8 +285,8 @@
   }
 
   .search-dropdown {
-    background-color: @white;
-    box-shadow: 0 0 5px 0 @grayscale6;
+    background-color: $white;
+    box-shadow: 0 0 5px 0 $grayscale6;
     display: none;
     position: absolute;
     top: 0;
@@ -302,7 +302,7 @@
       background-color: #f8f8f8;
       padding: 5px 7px;
       text-align: right;
-      border-bottom: 1px solid @grayscale4;
+      border-bottom: 1px solid $grayscale4;
 
       a {
         font-size: 77%;
@@ -340,7 +340,7 @@
 
         &:hover,
         &:focus {
-          color: @black;
+          color: $black;
         }
       }
 
@@ -398,4 +398,4 @@
       display: none;
     }
   }
-}
+}
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/fluid_stopgap.less b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/fluid_stopgap.scss
similarity index 98%
rename from uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/fluid_stopgap.less
rename to uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/fluid_stopgap.scss
index 0952c2ce799..0011a5294b7 100644
--- a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/fluid_stopgap.less
+++ b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/fluid_stopgap.scss
@@ -43,7 +43,7 @@
     cursor: default !important;
 
     a {
-      color: @grayscale7 !important;
+      color: $grayscale7 !important;
       cursor: default !important;
 
       &:hover {
@@ -131,4 +131,4 @@
   .row-fluid [class*="span"].pull-right {
     float: none;
   }
-}
+}
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/footer.less b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/footer.scss
similarity index 80%
rename from uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/footer.less
rename to uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/footer.scss
index 0069705f612..5e636de19e1 100644
--- a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/footer.less
+++ b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/footer.scss
@@ -22,28 +22,28 @@
    ========================================================================== */
 
 #region-footer-first {
-  background: @footer-background-color;
-  color: @footer-text-color;
+  background: $footer-background-color;
+  color: $footer-text-color;
   font-size: 90%;
   padding: 20px;
 
   a {
-    color: @footer-link-color;
+    color: $footer-link-color;
 
     &:hover,
     &:focus {
-      color: @footer-link-hover-color;
+      color: $footer-link-hover-color;
     }
   }
 
   h4 {
     a {
-      color: @footer-link-color;
+      color: $footer-link-color;
       margin: 0;
 
       &:hover,
       &:focus {
-        color: @footer-link-hover-color;
+        color: $footer-link-hover-color;
       }
     }
 
@@ -59,8 +59,8 @@
    ========================================================================== */
 
 #region-footer-second {
-  background: @footer-secondary-background-color;
-  color: @footer-text-color;
+  background: $footer-secondary-background-color;
+  color: $footer-text-color;
   font-size: 80%;
   padding: 5px 0;
 
@@ -69,11 +69,11 @@
   }
 
   .legal-footer a {
-    color: @footer-link-color;
+    color: $footer-link-color;
 
     &:hover,
     &:focus {
-      color: @footer-link-hover-color;
+      color: $footer-link-hover-color;
     }
   }
 }
@@ -83,10 +83,10 @@
    ========================================================================== */
 
 /*
- * Breakpoints: are defined in bootstrap/variables.less
+ * Breakpoints: are defined in bootstrap/variables.scss
  */
 
-@media only screen and (min-width: @screen-sm-min) {
+@media only screen and (min-width: 576px) {
   #region-footer-first,
   #region-footer-second {
     padding: 20px 0;
@@ -95,4 +95,4 @@
   #region-footer-first ul {
     display: block;
   }
-}
+}
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/fragment-permissions.scss b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/fragment-permissions.scss
new file mode 100644
index 00000000000..377e5d98830
--- /dev/null
+++ b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/fragment-permissions.scss
@@ -0,0 +1,164 @@
+/**
+ * Licensed to Apereo under one or more contributor license
+ * agreements. See the NOTICE file distributed with this work
+ * for additional information regarding copyright ownership.
+ * Apereo licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file
+ * except in compliance with the License.  You may obtain a
+ * copy of the License at the following location:
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/* Fragment Admin Mode Permissions Styling */
+
+/* Page permissions section */
+#portalEditPagePermissions {
+  margin-bottom: 15px;
+  text-align: right;
+  
+  .button {
+    background-color: #007bff;
+    color: white;
+    border: 1px solid #007bff;
+    padding: 8px 16px;
+    border-radius: 4px;
+    text-decoration: none;
+    display: inline-block;
+    
+    &:hover {
+      background-color: #0056b3;
+      border-color: #0056b3;
+      color: white;
+      text-decoration: none;
+    }
+    
+    i {
+      margin-right: 5px;
+    }
+  }
+}
+
+
+
+/* Permission links should look like links, not buttons */
+#portalEditPagePermissions .button,
+.portal-column-permissions-link.button {
+  background: transparent !important;
+  border: 0 !important;
+  padding: 0 !important;
+  color: rgb(0, 90, 169) !important;
+  text-decoration: none !important;
+  border-radius: 0 !important;
+  display: inline !important;
+  
+  &:hover {
+    color: rgb(0, 70, 130) !important;
+    text-decoration: underline !important;
+    background: transparent !important;
+  }
+  
+  i {
+    margin-right: 5px;
+  }
+}
+
+/* Column permissions */
+.column-permissions {
+  margin-bottom: 10px;
+  padding: 5px 0;
+  border-bottom: 1px solid #dee2e6;
+  
+  .icon.permissions {
+    margin-right: 5px;
+    
+    &:before {
+      content: "\f084"; /* FontAwesome key icon */
+      font-family: "FontAwesome";
+    }
+  }
+}
+
+/* Ensure permissions elements don't interfere with normal layout */
+.up-fragment-admin {
+  .column-permissions {
+    position: relative;
+    z-index: 10;
+  }
+  
+  #portalEditPagePermissions {
+    position: relative;
+    z-index: 10;
+  }
+}
+
+/* Hide permissions in focused mode */
+.up-focused {
+  .column-permissions,
+  #portalEditPagePermissions {
+    display: none !important;
+  }
+}
+
+/* Dialog styling for permissions dialogs */
+.edit-page-permissions-dialog,
+.edit-column-permissions-dialog,
+.edit-portlet-permissions-dialog {
+  .fl-widget {
+    border: 1px solid #dee2e6;
+    border-radius: 5px;
+    
+    .fl-widget-titlebar {
+      background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
+      border-bottom: 1px solid #dee2e6;
+      padding: 10px;
+      border-radius: 5px 5px 0 0;
+      
+      h2 {
+        margin: 0;
+        font-size: 16px;
+        color: #495057;
+      }
+    }
+    
+    .fl-widget-content {
+      padding: 15px;
+      
+      form {
+        p {
+          margin-bottom: 10px;
+          
+          input[type="checkbox"] {
+            margin-right: 8px;
+          }
+        }
+        
+        .buttons {
+          margin-top: 15px;
+          text-align: right;
+          
+          .button.primary {
+            background-color: #007bff;
+            color: white;
+            border: 1px solid #007bff;
+            padding: 8px 16px;
+            border-radius: 4px;
+            cursor: pointer;
+            
+            &:hover {
+              background-color: #0056b3;
+              border-color: #0056b3;
+            }
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/gallery.scss b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/gallery.scss
new file mode 100644
index 00000000000..7b71ae39ab8
--- /dev/null
+++ b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/gallery.scss
@@ -0,0 +1,968 @@
+/**
+ * Licensed to Apereo under one or more contributor license
+ * agreements. See the NOTICE file distributed with this work
+ * for additional information regarding copyright ownership.
+ * Apereo licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file
+ * except in compliance with the License.  You may obtain a
+ * copy of the License at the following location:
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/*
+------------------------------------
+  uPortal Gallery.
+------------------------------------
+ * The gallery is a sliding drawer that provides interfaces for customizing the protal.
+ */
+
+/* Gallery Variables */
+$galleryBackground: $grayscale10;
+$galleryBorder: 1px solid $grayscale4;
+$galleryHandleBackground: $black url("./common/images/gallery-bar.png") bottom left repeat-x;
+$galleryHandleBorder: 1px solid $grayscale7;
+$galleryHandleLinkBackround: $white scroll url("./common/images/gallery-handle.png") 0 0 repeat-x;
+$galleryHandleLink: $grayscale9;
+$galleryHandleRound: 3px;
+$galleryHandleShadow: 0 1px 2px $grayscale4;
+$galleryHandleIconClosed: url("./common/images/gallery-handle-arrow-down.png");
+$galleryHandleIconOpen: url("./common/images/gallery-handle-arrow-up.png") !important;
+$galleryBarBackground: transparent url("./common/images/gallery-bar.png") top left repeat-x;
+$galleryMenuBackground: $grayscale9;
+$galleryMenuItemBackground: $grayscale8;
+$galleryMenuItemLink: $white;
+$galleryMenuItemBackgroundHover: $color1-darker;
+$galleryMenuItemLinkHover: $white;
+$galleryMenuItemActiveBackground: $grayscale10;
+$galleryMenuItemActiveLink: $white;
+$galleryMenuItemActiveIcon: transparent url("./common/images/gallery-arrow-right.png") 90% 50% no-repeat;
+$galleryCloseButtonType: default;
+$galleryFilterBackground: $grayscale7;
+$galleryFilterBorder: 1px solid $grayscale8;
+$galleryFilterRound: 5px;
+$galleryFilterTitleRound: 5px;
+$galleryFilterTitleBackground: $grayscale10;
+$galleryFilterTitle: $color1;
+$galleryFilterTitleHover: $color1-lighter;
+$galleryFilterTitleActive: $white;
+$galleryFilterTitleActiveHover: $color1-lighter;
+$galleryFilterTitleActiveBgd: $grayscale9;
+$galleryFilterSubtitle: $grayscale2;
+$galleryFilterSubtitleLine: 1px dotted $grayscale9;
+$galleryFSearchInputBackground: $grayscale8;
+$galleryFSearchInputText: $white;
+$galleryFSearchInputPadding: 0.3em;
+$galleryFSearchInputHover: $grayscale7;
+$galleryFSearchInputFocusText: $black;
+$galleryFSearchInputFocusBackground: $white;
+$galleryCatLink: $grayscale3;
+$galleryCatLinkHover: $color1;
+$galleryCatActiveLink: $white;
+$galleryResultsBottomPadding: 5px;
+$galleryResultsText: $grayscale4;
+$galleryRIBackground: $grayscale8;
+$galleryRIBorder: 1px solid $grayscale5;
+$galleryRIRound: 5px;
+$galleryRIShadow: 1px 1px 2px #000;
+$galleryRIUtilityHeight: 16px;
+$galleryRIUtilityRound: 5px;
+$galleryRIGripper: $grayscale9 url("./common/images/gripper.png") 5px 0px no-repeat;
+$galleryRITitle: $white;
+$galleryRIDescription: $grayscale3;
+$galleryRIBackgroundHover: $grayscale9;
+$galleryRIBorderHover: 1px soild $color1;
+$galleryRIGradient1Hover: $grayscale10;
+$galleryRIGradient2Hover: #060606;
+$galleryRILink: #000;
+$galleryRILinkBackground: $grayscale8;
+$galleryRILinkGradient1: $grayscale4;
+$galleryRILinkGradient2: $grayscale9;
+$galleryRILinkRound: 5px;
+$galleryRILinkBackgroundHover: $color1-dark;
+$galleryRILinkGradient1Hover: $color1-light;
+$galleryRILinkGradient2Hover: $color1-dark;
+$galleryRISelectedBackground: $grayscale8;
+$galleryRISelectedBorderWidth: 3px;
+$galleryRISelectedBorderStyle: solid;
+$galleryRISelectedBorderColor: $color1;
+$galleryPagerText: $white;
+$galleryPagerButtonBackground: $grayscale7;
+$galleryPagerButtonBorder: 1px solid $grayscale5;
+$galleryPagerButtonGradient1: $grayscale8;
+$galleryPagerButtonGradient2: $grayscale10;
+$galleryPagerButtonRound: 5px;
+$galleryPagerBtnBackgroundHover: $grayscale5;
+$galleryPagerBtnGradient1Hover: $grayscale6;
+$galleryPagerBtnGradient2Hover: $grayscale10;
+$galleryPagerBtnBgdDisabled: $grayscale8 !important;
+$galleryPagerBtnBorderDisabled: 1px solid $grayscale7 !important;
+
+/* Gallery Mixins */
+@mixin gallery-handle-round($galleryHandleRound) {
+  @if $galleryHandleRound {
+    @include border-radiuses(0, 0, $galleryHandleRound, $galleryHandleRound);
+  }
+}
+
+@mixin gallery-handle-shadow($galleryHandleShadow) {
+  @if $galleryHandleShadow {
+    @include box-shadow($galleryHandleShadow);
+  }
+}
+
+@mixin gallery-filter-round($galleryFilterRound) {
+  @if $galleryFilterRound {
+    @include border-radius($galleryFilterRound);
+  }
+}
+
+@mixin gallery-filter-title-round($galleryFilterTitleRound) {
+  @if $galleryFilterTitleRound {
+    @include border-radiuses(5px, 0, 0, 5px);
+
+    span {
+      @include border-radiuses($galleryFilterTitleRound, $galleryFilterTitleRound, 0, 0);
+    }
+  }
+}
+
+@mixin gallery-ri-round($galleryRIRound) {
+  @if $galleryRIRound {
+    @include border-radius($galleryRIRound);
+  }
+}
+
+@mixin gallery-ri-shadow($galleryRIShadow) {
+  @if $galleryRIShadow {
+    @include box-shadow($galleryRIShadow);
+  }
+}
+
+@mixin gallery-ri-utility-round($galleryRIUtilityRound) {
+  @if $galleryRIUtilityRound {
+    @include border-radiuses($galleryRIUtilityRound, $galleryRIUtilityRound, 0, 0);
+  }
+}
+
+@mixin gallery-ri-link-gradient($galleryRILinkGradient1) {
+  @if $galleryRILinkGradient1 {
+    @include vertical-gradient($galleryRILinkGradient1, $galleryRILinkGradient2);
+  }
+}
+
+@mixin gallery-ri-link-round($galleryRILinkRound) {
+  @if $galleryRILinkRound {
+    @include border-radiuses(0, $galleryRILinkRound, 0, 0);
+  }
+}
+
+@mixin gallery-ri-link-gradient-hover($galleryRILinkGradient1Hover) {
+  @if $galleryRILinkGradient1Hover {
+    @include vertical-gradient($galleryRILinkGradient1Hover, $galleryRILinkGradient2Hover);
+  }
+}
+
+@mixin gallery-pager-button-gradient($galleryPagerButtonGradient1) {
+  @if $galleryPagerButtonGradient1 {
+    @include vertical-gradient($galleryPagerButtonGradient1, $galleryPagerButtonGradient2);
+  }
+}
+
+@mixin gallery-pager-button-round($galleryPagerButtonRound) {
+  @if $galleryPagerButtonRound {
+    @include border-radius($galleryPagerButtonRound);
+  }
+}
+
+@mixin gallery-pager-button-gradient-hover($galleryPagerBtnGradient1Hover) {
+  @if $galleryPagerBtnGradient1Hover {
+    @include vertical-gradient($galleryPagerBtnGradient1Hover, $galleryPagerBtnGradient2Hover);
+  }
+}
+
+/* Gallery Styles */
+.portal {
+  .up-gallery {
+    background: $galleryBackground;
+    border: $galleryBorder;
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    box-sizing: border-box;
+
+
+    div {
+      margin: 0;
+      padding: 0;
+    }
+
+    .handle {
+      /* Clickable handle that opens the drawer. Once open, the handle can be clicked to close the drawer. */
+      background: $galleryHandleBackground;
+
+      a {
+        background: $galleryHandleLinkBackround;
+        color: $galleryHandleLink;
+        border: $galleryHandleBorder;
+        border-top: none;
+
+        span {
+          background-image: $galleryHandleIconClosed;
+          background-position: right center;
+          background-repeat: no-repeat;
+        }
+      }
+
+      .handle-arrow-up {
+        background-image: $galleryHandleIconOpen;
+      }
+    }
+
+    .gallery-inner {
+      display: none;
+      overflow: hidden;
+      min-height: 200px;
+      position: relative;
+
+      .menu-wrapper {
+        display: block;
+        float: left;
+        min-height: 200px;
+        position: relative;
+        width: 130px;
+
+        /* The navigation menu of gallery views. */
+        .menu {
+          background: $galleryMenuBackground;
+          min-height: 190px;
+          margin: 0 auto 0 15px;
+          padding: 10px 0 0;
+          position: relative;
+          width: 100px;
+
+          @include border();
+
+          li {
+            background: $galleryMenuItemBackground;
+            cursor: pointer;
+            height: 34px;
+            list-style: none;
+            margin: 0;
+            position: relative;
+
+            @include border($grayscale7);
+
+            a {
+              color: $galleryMenuItemLink;
+              text-decoration: none;
+
+              span {
+                bottom: 0;
+                display: block;
+                font-size: 12px;
+                font-weight: bold;
+                margin-right: -2px;
+                padding: 8px;
+              }
+            }
+
+            &:hover,
+            &:active {
+              background: $galleryMenuItemBackgroundHover;
+
+              a {
+                color: $galleryMenuItemLinkHover;
+              }
+            }
+          }
+
+          .active {
+            background: $galleryMenuItemActiveBackground;
+            margin-right: -1px;
+            border-right: none;
+
+            a {
+              color: $galleryMenuItemActiveLink;
+            }
+
+            span {
+              background: $galleryMenuItemActiveIcon;
+              position: relative;
+            }
+
+            &:hover {
+              background: $galleryMenuItemActiveBackground;
+            }
+          }
+
+          li.last {
+            border-bottom-width: 1px;
+            border-bottom-style: solid;
+          }
+        }
+      } /* end .menu-wrapper */
+
+      .content-filters-wrapper {
+        /* Search and category filters for the add portlet and use portlet views. */
+        background: $grayscale9;
+        border: $galleryFilterBorder;
+        float: left;
+
+        @include border-radius();
+
+        h3 {
+          /* Filter titles */
+          background: $galleryFilterTitleBackground;
+          color: $galleryFilterTitle;
+          margin: 0;
+          padding: 5px 0 0;
+          cursor: pointer;
+          font-size: 12px;
+
+          @include border-radiuses(5px, 0, 0, 5px);
+
+          span {
+            padding: 1px 10px;
+          }
+        }
+
+        h3:hover,
+        h3:focus {
+          color: $galleryFilterTitleHover;
+        }
+
+        .active {
+          h3 {
+            span {
+              background: $galleryFilterTitleActiveBgd;
+              color: $galleryFilterTitleActive;
+              @include border-radiuses(5px, 0, 0, 5px);
+            }
+          }
+        }
+
+        .active h3:hover,
+        .active h3:focus {
+          color: $galleryFilterTitleActiveHover;
+        }
+
+        h4 {
+          /* Filter subtitles */
+          color: $galleryFilterSubtitle;
+          border-bottom: $galleryFilterSubtitleLine;
+        }
+
+        .portlet-search-input {
+          /* Filter search */
+          background: $galleryFSearchInputBackground;
+          color: $galleryFSearchInputText;
+          padding: $galleryFSearchInputPadding;
+          @include border-radius();
+
+          &:hover {
+            background: $galleryFSearchInputHover;
+          }
+
+          &:focus {
+            color: $galleryFSearchInputFocusText;
+            background: $galleryFSearchInputFocusBackground;
+          }
+        }
+
+        .categories {
+          /* Filter categories */
+          a {
+            color: $galleryCatLink;
+          }
+
+          a:hover,
+          a:focus {
+            color: $galleryCatLinkHover;
+          }
+
+          .active a {
+            color: $galleryCatActiveLink;
+          }
+        }
+      } /* end .content-filters-wrapper */
+
+      .results-wrapper {
+        /* Results section of the gallery. Lists portlets, skins, or layout options. */
+        padding-bottom: $galleryResultsBottomPadding;
+        color: $galleryResultsText;
+
+        .layout-wrapper .ri-link,
+        .skins-wrapper .ri-link,
+        .portlet.result-item {
+          background: $grayscale10;
+
+          @include border($grayscale5);
+          @include border-radius();
+          @include box-shadow($galleryRIShadow);
+
+          &:hover,
+          &:focus,
+          &:active {
+            background: $galleryRIBackgroundHover;
+            border: $galleryRIBorderHover;
+
+            @include vertical-gradient($galleryRIGradient1Hover, $galleryRIGradient2Hover);
+          }
+        }
+
+        .layout-wrapper,
+        .skins-wrapper {
+          .ri-link {
+            @include border-radiuses(5px, 0, 0, 0);
+            @include vertical-gradient(darkgrey, $grayscale8);
+          }
+        }
+
+        .results-item.disabled {
+          border-color: #3a3a3a !important;
+
+          @include opacity(20);
+
+          &:hover,
+          &:focus,
+          a:hover,
+          a:focus {
+            background: none !important;
+            cursor: default !important;
+          }
+        }
+
+        .results-item.selected .ri-link {
+          background: $galleryRISelectedBackground;
+          border-width: $galleryRISelectedBorderWidth;
+          border-style: $galleryRISelectedBorderStyle;
+          border-color: $galleryRISelectedBorderColor;
+          margin-bottom: -($galleryRISelectedBorderWidth * 2);
+        }
+
+        .ri-wrapper {
+          .ri-utility {
+            height: $galleryRIUtilityHeight;
+            background: $grayscale9;
+
+            @include border-radiuses(5px, 0, 0, 5px);
+          }
+
+          .portlet-thumb-gripper {
+            background: $galleryRIGripper;
+            cursor: move;
+            display: block;
+
+            span {
+              display: block;
+              height: 16px;
+              overflow: hidden;
+              visibility: hidden;
+              width: 16px;
+            }
+          }
+
+          .ri-titlebar {
+            color: $galleryRITitle;
+          }
+
+          .ri-description {
+            color: $galleryRIDescription;
+          }
+        }
+
+        .portlet-wrapper {
+          .ri-link {
+            color: $galleryRILink;
+            display: none;
+
+            @include border-radiuses(5px, 0, 0, 0);
+            @include vertical-gradient(darkgrey, $grayscale8);
+          }
+        }
+
+        .portlet-wrapper:hover,
+        .portlet-wrapper:focus {
+          .ri-link {
+            background: $galleryRILinkBackgroundHover;
+            display: block;
+            @include vertical-gradient(#699bc4, #38678f);
+          }
+        }
+
+        // Gallery column layout (replaces Fluid column system)
+        .results-wrapper.portlet-results {
+          position: relative;
+          overflow: hidden;
+        }
+        
+        .pager-column {
+          width: 74px;
+          position: absolute;
+          right: 0;
+          top: 8px;
+          margin: 0;
+          padding: 0;
+          z-index: 1;
+        }
+        
+        .results-column {
+          margin-right: 74px;
+          position: relative;
+        }
+
+        .pager {
+          width: 74px;
+          height: 162px;
+          position: static;
+          margin: 0;
+          padding: 0;
+          text-align: center;
+
+          .pager-pagination {
+            display: none; // Hide page text completely
+          }
+
+          .pager-button-up {
+            background: $galleryPagerButtonBackground;
+            border: $galleryPagerButtonBorder;
+            width: 74px;
+            height: 62px;
+            margin: 0;
+            display: block;
+            text-align: center;
+
+            @include vertical-gradient($galleryPagerButtonGradient1, $galleryPagerButtonGradient2);
+            @include border-radius();
+
+            a {
+              display: block;
+              width: 72px;
+              height: 59px;
+              text-decoration: none;
+              font-size: 10px;
+              text-align: center;
+              background-repeat: no-repeat;
+              background-position: center;
+              background-image: url("./common/images/gallery-pager-up-inactive.png");
+
+              span {
+                display: block;
+                height: 59px;
+                overflow: hidden;
+                visibility: hidden;
+                width: 72px;
+              }
+            }
+          }
+
+          .pager-button-down {
+            background: $galleryPagerButtonBackground;
+            border: $galleryPagerButtonBorder;
+            width: 74px;
+            height: 62px;
+            margin: 38px 0 0 0;
+            display: block;
+            text-align: center;
+
+            @include vertical-gradient($galleryPagerButtonGradient1, $galleryPagerButtonGradient2);
+            @include border-radius();
+
+            a {
+              display: block;
+              width: 72px;
+              height: 59px;
+              text-decoration: none;
+              font-size: 10px;
+              text-align: center;
+              background-repeat: no-repeat;
+              background-position: center;
+              background-image: url("./common/images/gallery-pager-down-active.png");
+
+              span {
+                display: block;
+                height: 59px;
+                overflow: hidden;
+                visibility: hidden;
+                width: 72px;
+              }
+            }
+          }
+
+          .pager-button-up:hover,
+          .pager-button-up:focus,
+          .pager-button-down:hover,
+          .pager-button-down:focus {
+            background: $galleryPagerBtnBackgroundHover;
+            @include border(steelblue);
+            @include vertical-gradient(#4d4d4d, #0d0d0d);
+          }
+
+          .fl-pager-disabled {
+            background: $grayscale10 !important;
+            cursor: default !important;
+            border: 1px solid $grayscale9 !important;
+
+            a {
+              cursor: default !important;
+              pointer-events: none;
+              background-image: url("./common/images/gallery-pager-up-inactive.png") !important;
+            }
+          }
+        } // end .pager
+      } // end .results-wrapper
+    } // end .gallery-inner
+
+    .content-wrapper {
+      margin: 0 0 0 127px;
+      padding: 8px 0;
+      display: block;
+      height: 174px;
+    }
+
+    .content-filters-wrapper {
+      display: block;
+      height: 174px;
+      padding: 0;
+      position: relative;
+      width: 200px;
+    }
+
+    .content-results-wrapper {
+      margin: 0;
+      display: block;
+      height: 172px;
+      padding: 0;
+    }
+
+    .content-filters-wrapper + .content-results-wrapper {
+      margin-left: 220px;
+    }
+
+    .column-inner {
+      position: relative;
+    }
+
+    .results-wrapper {
+      overflow: hidden;
+      padding-right: 1px;
+    }
+  } // end .up-gallery
+} // end .portal
+
+/**
+ * Additional styles from LESS version
+ */
+
+/* Gallery Portlet List - CRITICAL LAYOUT RULES */
+.up-gallery .portlet-list li {
+  width: 32%;
+  height: 50%;
+  margin: 0px 5px 5px 0px;
+}
+
+/* Fluid fl-col-main replacement for gallery layout */
+.up-gallery-col-main {
+  margin-right: 74px;
+  flex: 0 1 auto;
+  width: auto;
+}
+
+/* Apply to results-column */
+.up-gallery .results-column {
+  margin-right: 74px;
+  flex: 0 1 auto;
+  width: auto;
+}
+
+/* Override Bootstrap flexbox to match Fluid layout dimensions */
+.portal .up-gallery .content-results-wrapper.col {
+  width: 70.5%;
+  flex: none;
+}
+
+
+
+.up-gallery .portlet-list li .portlet-wrapper {
+  height: 80px;
+}
+
+.up-gallery .portlet-wrapper .ri-link {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: block;
+  cursor: pointer;
+  padding: 1px 8px;
+  text-align: center;
+  font-size: 10px;
+  line-height: 14px;
+}
+
+.up-gallery .portlet-wrapper .ri-icon {
+  width: 32px;
+  height: 32px;
+}
+
+.up-gallery .portlet-wrapper .ri-content {
+  padding: 5px;
+}
+
+.up-gallery .results-wrapper .results-list li {
+  display: block;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  position: relative;
+  float: left;
+}
+
+/* Portlet Result Item Typography Fixes */
+.up-gallery .ri-titlebar,
+.up-gallery .portlet-thumb-titlebar {
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 15.7143px;
+  color: rgb(255, 255, 255);
+  margin: 0;
+  padding: 0;
+}
+
+.up-gallery .ri-description,
+.up-gallery .portlet-thumb-description {
+  font-size: 10px;
+  font-weight: 400;
+  line-height: 14.2857px;
+  color: rgb(216, 216, 216);
+  margin: 0;
+  padding: 0;
+}
+
+/* Hide thumbnail text like release version */
+.up-gallery .ri-icon span,
+.up-gallery .portlet-thumb-icon span {
+  visibility: hidden;
+}
+
+/* Search Input Styling - Match Release Version */
+.up-gallery .portlet-search-input {
+  width: 157px;
+  height: 32.375px;
+  font-size: 14px;
+  color: rgb(255, 255, 255);
+  background: rgb(105, 105, 105);
+  border: 2px inset rgb(118, 118, 118);
+  padding: 4.2px;
+  box-sizing: border-box;
+}
+
+.up-gallery .portlet-search-input::placeholder {
+  color: rgb(255, 255, 255);
+}
+
+/* Hide search label and submit button like release version */
+.up-gallery .portlet-search-view label {
+  display: none;
+}
+
+.up-gallery .portlet-search-submit {
+  display: none;
+}
+
+/* Category List Styling - Match Release Version */
+.up-gallery .categories {
+  display: block;
+  width: 178px;
+  white-space: normal;
+  overflow: hidden;
+  word-wrap: break-word;
+  word-break: normal;
+  text-align: start;
+  line-height: 1.2;
+}
+
+.up-gallery .categories h4 {
+  font-size: 10px;
+  font-weight: 500;
+  color: rgb(229, 229, 229);
+  margin: 10px 0px 3px;
+  padding: 0px 0px 1px;
+}
+
+.up-gallery .category-choice {
+  display: inline;
+  margin-right: 2px;
+}
+
+/* Handle new span-based structure */
+.up-gallery .category-list-inline {
+  display: block;
+  width: 178px;
+  margin: 0;
+  padding: 0;
+  white-space: normal;
+  word-wrap: break-word;
+}
+
+.up-gallery .category-list-inline .category-choice {
+  display: inline;
+  margin-right: 2px;
+}
+
+/* Match release version ul/li structure exactly */
+.portal .up-gallery .categories ul {
+  display: inline;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.portal .up-gallery .categories li {
+  display: inline;
+  margin: 0 2px 0 0;
+  padding: 0;
+}
+
+.up-gallery .category-choice-link {
+  display: inline;
+  white-space: normal;
+  word-wrap: normal;
+  word-break: normal;
+  font-size: 10px;
+  font-weight: 400;
+  color: rgb(255, 255, 255);
+  text-decoration: none;
+  line-height: 14.2857px;
+}
+
+.up-gallery .category-choice-link:hover {
+  color: $galleryCatLinkHover !important;
+}
+
+.up-gallery .category-choice.active .category-choice-link {
+  color: rgb(255, 255, 255) !important;
+  font-weight: 400 !important;
+}
+
+/* Special styling for ALL category */
+.up-gallery .category-choice.first .category-choice-link {
+  font-weight: 400;
+  text-transform: uppercase;
+  text-decoration: underline;
+}
+
+/* Override Bootstrap font family for categories column */
+.up-gallery .categories-column {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
+  font-size: 14px !important;
+  color: rgb(51, 51, 51) !important;
+}
+
+/* Skin Selector Styling - Match Release Version */
+.up-gallery .skins-list li.results-item.skin {
+  width: 136px;
+  height: auto;
+  margin: 0px 5px 5px 0px;
+  display: block;
+  list-style: none;
+  padding: 0;
+  position: relative;
+  float: left;
+}
+
+.up-gallery .skins-wrapper {
+  height: auto;
+}
+
+.up-gallery .ri-link.skin-link {
+  display: block;
+  width: 136px;
+  padding: 5px;
+  margin: 0px 0px -6px;
+}
+
+.up-gallery .skin-titlebar {
+  width: 120px;
+  display: block;
+  margin: 0px;
+  padding: 0px;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 15.7143px;
+  color: rgb(255, 255, 255);
+}
+
+.up-gallery .skins-wrapper .ri-content {
+  width: 120px;
+  height: 70px;
+  display: block;
+  margin: 0px;
+  padding: 0px;
+}
+
+.up-gallery .portlet-wrapper .ri-content {
+  width: auto;
+  height: auto;
+}
+
+/* Layout-specific styling */
+.up-gallery .layout-wrapper .ri-link {
+  display: block;
+  width: 140px;
+  padding: 5px;
+  margin: 0px;
+}
+
+.up-gallery .layout-wrapper .ri-content {
+  display: flex;
+  align-items: center;
+  width: 128px;
+  height: 27px;
+}
+
+.up-gallery .layout-wrapper .ri-titlebar {
+  width: 128px;
+}
+
+.up-gallery .layout-wrapper .ri-icon {
+  width: 27px;
+  height: 27px;
+  flex-shrink: 0;
+  margin-right: 5px;
+}
+
+.up-gallery .layout-wrapper .ri-description {
+  width: auto;
+  height: auto;
+  display: inline;
+  flex: 1;
+}
+
+.up-gallery .results-item.layout {
+  width: 140px;
+  margin: 0 5px 5px 0;
+}
+
+.up-gallery .layouts-list .layout {
+  margin: 0 5px 5px 0;
+}
+
+.up-gallery .skin-thumb {
+  width: 120px;
+  height: 70px;
+  display: block;
+  margin: 0px;
+  padding: 0px;
+}
+
+.up-gallery .skin-thumb span {
+  visibility: hidden;
+}
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/grids.scss b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/grids.scss
new file mode 100644
index 00000000000..7295f55ad7f
--- /dev/null
+++ b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/grids.scss
@@ -0,0 +1,116 @@
+/**
+ * Licensed to Apereo under one or more contributor license
+ * agreements. See the NOTICE file distributed with this work
+ * for additional information regarding copyright ownership.
+ * Apereo licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file
+ * except in compliance with the License.  You may obtain a
+ * copy of the License at the following location:
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/*
+ * creates a list of percentages for generating $number of evenly sized columns
+ * includes selectors to allow targeting: xs, sm, md, lg, and xl screensizes.
+ * Screensizes are inherited from Bootstrap.
+ */
+@mixin fn-even-columns($number-of-columns) {
+  @if $number-of-columns > 0 {
+    @include fn-even-columns($number-of-columns - 1); // recursive iterator
+
+    @include fn-set-width-column-for-size($number-of-columns, xs);
+    @include fn-set-width-column-for-size($number-of-columns, sm);
+    @include fn-set-width-column-for-size($number-of-columns, md);
+    @include fn-set-width-column-for-size($number-of-columns, lg);
+
+    // On smaller than xs screen sizes all content should be full screen
+    @media (max-width: 575px) {
+      .up-portlet-wrapper,
+      .fl-reorderer-dropMarker {
+        width: 100%;
+      }
+    }
+  }
+}
+
+/*
+ * creates an percentage width for screens of a given screensize
+ *
+ * E.G.
+ *  @include fn-set-width-column-for-size(2, xs);
+ *  // creates a `.up-col-xs-2 .up-portlet` selector
+ *  // that applys 50% width, for bootstrap xs and larger screen sizes
+ */
+@mixin fn-set-width-column-for-size($number-of-columns, $screen-size) {
+  $min-width: 576px; // xs
+  @if $screen-size == sm { $min-width: 576px; }
+  @if $screen-size == md { $min-width: 768px; }
+  @if $screen-size == lg { $min-width: 992px; }
+
+  &.up-col-#{$screen-size}-#{$number-of-columns} {
+    .up-portlet-wrapper,
+    .fl-reorderer-dropMarker {
+      // required for drag and drop styling to work
+      @media (min-width: #{$min-width}) {
+        width: percentage(1 / $number-of-columns);
+      }
+    }
+  }
+}
+
+.up-grid {
+  /*
+   * Leverage css flex to make the height of all elements in the row match.
+   */
+  &.up-matching-height {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+
+    /*
+     * A grid layout which will always provide an absolute and constant width
+     * for portlet size, while allowing the number of columns presented to
+     * dynamically vary.
+     *
+     * E.G.
+     * <div class="up-grid up-matching-height up-constant-width-variable-columns">
+     *   <section class="up-portlet">...</section>
+     * </div>
+     */
+    &.up-constant-width-variable-columns .up-portlet {
+      width: $up-flex-constant-width;
+      max-width: 100%;
+    }
+
+    /*
+     * A grid layout which will always have a constant max number of portlets in
+     * a row.
+     *
+     * E.G.
+     * <div class="up-grid up-matching-height up-constant-columns up-col-xs-2 up-col-sm-3 up-col-md-4 up-col-lg-5">
+     *   <section class="up-portlet">...</section>
+     * </div>
+     */
+    &.up-constant-columns {
+      @include fn-even-columns(6);
+
+      .up-portlet-wrapper-inner {
+        margin: 10px;
+        height: 100%;
+
+        .up-portlet-content-wrapper {
+          // total height of wrapper inner - titlebar height
+          height: calc(100% - 34px);
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/header.less b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/header.scss
similarity index 67%
rename from uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/header.less
rename to uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/header.scss
index 5b0a2bc8e84..e22e93a9d95 100644
--- a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/header.less
+++ b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/header.scss
@@ -25,7 +25,7 @@
   height: 1px;
   width: 1px;
   text-align: left;
-  color: @header-link-color;
+  color: $header-link-color;
   overflow: hidden;
 
   &:active,
@@ -41,27 +41,27 @@
 }
 
 .portal-header {
-  background: @header-background-color;
-  color: @header-text-color;
+  background: $header-background-color;
+  color: $header-text-color;
 
   a {
-    color: @header-link-color;
+    color: $header-link-color;
     text-decoration: none;
   }
 
   .menu-toggle {
     margin: 2px 0 2px 12px;
     padding: 0.25rem 1rem;
-    background: @menu-toggle-background-color;
-    border: 1px solid @menu-toggle-border-color;
-    color: @menu-toggle-text-color;
-    .border-radius();
+    background: $menu-toggle-background-color;
+    border: 1px solid $menu-toggle-border-color;
+    color: $menu-toggle-text-color;
+    @include border-radius();
 
     &:hover,
     &:focus {
-      background: @menu-toggle-hover-background-color;
-      color: @menu-toggle-hover-text-color;
-      border: 1px solid @menu-toggle-hover-border-color;
+      background: $menu-toggle-hover-background-color;
+      color: $menu-toggle-hover-text-color;
+      border: 1px solid $menu-toggle-hover-border-color;
     }
 
     i {
@@ -85,19 +85,41 @@
   /* TODO:  Convert the div.portal-global to be the div.region-eyebrow
        (in the XSL) and move these styles to regions.less */
   padding: 6px 2px 2px;
-  .gradient(@portal-global-background-color, @portal-global-background-gradient);
+  margin: 0 -15px;
+  @include gradient($portal-global-background-color, $portal-global-background-gradient);
 
-  border-bottom: 1px solid @portal-global-border-color;
-  .drop-shadow();
+  border-bottom: 1px solid $portal-global-border-color;
+  @include drop-shadow();
 
   text-align: right;
+  display: block; // Override Bootstrap flex display
+  
+  // Header login buttons should appear as simple links, not Bootstrap buttons
+  #webLoginContainer {
+    #portalCASLogin .btn {
+      background: transparent !important;
+      border: 1px solid transparent !important;
+      color: $header-link-color;
+      padding: 6px 12px;
+      margin: 0;
+      font-size: 14px;
+      line-height: 20px;
+      border-radius: 4px;
+      
+      &:hover {
+        background: transparent !important;
+        color: $header-link-color;
+        text-decoration: underline;
+      }
+    }
+  }
 }
 
 .portal-editing {
-  .inline-block-list;
+  @include inline-block-list;
 
   li {
-    .float;
+    @include float;
   }
 }
 
@@ -111,7 +133,7 @@ h1.portal-logo {
 }
 
 h1.portal-logo a {
-  color: @header-text-color;
+  color: $header-text-color;
 }
 
 h1.portal-logo a:hover {
@@ -119,7 +141,7 @@ h1.portal-logo a:hover {
 }
 
 #webSearchContainer {
-  margin: 12px 0 8px;
+  margin: 48px 0 8px;
 }
 
 #webSearchSubmit {
@@ -136,7 +158,7 @@ h1.portal-logo a:hover {
  * Breakpoints: are defined in bootstrap/variables.less
  */
 
-@media only screen and (min-width: @screen-sm-min) {
+@media only screen and (min-width: 576px) {
   .portal-header {
     .container {
       padding: 0;
@@ -171,4 +193,4 @@ h1.portal-logo a:hover {
 
 div.global-container {
   padding: 0;
-}
+}
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/jsr-168.scss b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/jsr-168.scss
new file mode 100644
index 00000000000..f79b8601139
--- /dev/null
+++ b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/jsr-168.scss
@@ -0,0 +1,281 @@
+/**
+ * Licensed to Apereo under one or more contributor license
+ * agreements. See the NOTICE file distributed with this work
+ * for additional information regarding copyright ownership.
+ * Apereo licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file
+ * except in compliance with the License.  You may obtain a
+ * copy of the License at the following location:
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/* variables */
+$dim-font-by-this-percentage: 10%;
+
+/* dropdown's which occur within portlet menu variables. */
+$dropdown-inside-of-menu-top: 0px;
+$dropdown-inside-of-menu-position: relative;
+$dropdown-inside-of-menu-margin: 0px;
+$dropdown-inside-of-menu-padding: 0px;
+$dropdown-inside-of-menu-shadow: none;
+$dropdown-inside-of-menu-list-style: none;
+$dropdown-inside-of-menu-border: none;
+$dropdown-inside-of-menu-width: 100%;
+
+/* dropdown which occurs stand alone */
+$stand-along-dropdown-float: left;
+$stand-along-dropdown-list-style: outside none none;
+$stand-along-dropdown-margin: 2px 0 0;
+$stand-along-dropdown-min-width: 160px;
+$stand-along-dropdown-padding: 5px 0;
+$stand-along-dropdown-position: absolute;
+$stand-along-dropdown-text-align: left;
+$stand-along-dropdown-top: 100%;
+$stand-along-dropdown-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
+$stand-along-dropdown-border: 1px solid $dropdown-border-color;
+$stand-along-dropdown-background-clip: padding-box;
+$stand-along-dropdown-left: 0px;
+
+.portlet-font {
+  font-family: $font-family-base;
+  font-size: $font-size-base;
+  color: $body-color;
+  line-height: $line-height-base;
+}
+
+.portlet-font-dim {
+  color: lighten($body-color, $dim-font-by-this-percentage);
+  font-family: $font-family-base;
+  font-size: $font-size-base;
+  line-height: $line-height-base;
+}
+
+.portlet-msg-info {
+  @extend .alert;
+  @extend .alert-info;
+}
+
+.portlet-msg-error {
+  @extend .alert;
+  @extend .alert-danger;
+}
+
+.portlet-msg-alert {
+  @extend .alert;
+  @extend .alert-warning;
+}
+
+.portlet-msg-success {
+  @extend .alert;
+  @extend .alert-success;
+}
+
+/* table and section sections */
+.portlet-section-header,
+.portlet-table-header {
+  @extend h3;
+}
+
+.portlet-section-alternate,
+.portlet-table-alternate {
+  background: $table-striped-bg;
+}
+
+.portlet-section-selected,
+.portlet-table-selected {
+  background: $table-active-bg;
+}
+
+.portlet-section-subheader,
+.portlet-table-subheader {
+  @extend h4;
+}
+
+.portlet-section-footer,
+.portlet-table-footer {
+  @extend h5;
+}
+
+.portlet-section-text,
+.portlet-table-text {
+  color: $info;
+}
+
+/* forms */
+.portlet-form-label {
+  @extend h3;
+}
+
+.portlet-form-input-field {
+  @extend .form-control;
+}
+
+.portlet-form-button {
+  @extend .btn;
+  background-color: $primary;
+  border-color: $primary;
+  color: $white;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.portlet-icon-label {
+  @extend label;
+}
+
+.portlet-form-field-label {
+  @extend label;
+}
+
+/* portlet menus */
+.portlet-menu {
+  @extend .nav;
+  @extend .nav-pills;
+
+  li.portlet-menu-item {
+    &.active,
+    .portlet-menu-item-selected {
+      &:hover,
+      &:focus {
+        background-color: $nav-pills-link-active-bg;
+        color: $nav-pills-link-active-color;
+        border-radius: $nav-pills-border-radius;
+
+        > a {
+          &:hover,
+          &:focus {
+            background: inherit;
+            color: $white;
+            border-radius: $nav-pills-border-radius;
+          }
+        }
+      }
+
+      > a {
+        background-color: $nav-pills-link-active-bg;
+        color: $nav-pills-link-active-color;
+      }
+    }
+
+    a {
+      border-radius: $nav-pills-border-radius;
+      display: block;
+      padding: $nav-link-padding-y $nav-link-padding-x;
+      position: relative;
+      text-decoration: none;
+      color: $link-color;
+
+      &:hover,
+      &:focus {
+        background-color: var(--bs-secondary-bg);
+        color: $navbar-light-color;
+      }
+    }
+
+    .dropdown-menu,
+    .portlet-menu-cascade,
+    .portlet-menu-cascade-item-selected {
+      top: $dropdown-inside-of-menu-top;
+      position: $dropdown-inside-of-menu-position;
+      margin: $dropdown-inside-of-menu-margin;
+      padding: $dropdown-inside-of-menu-padding;
+      box-shadow: $dropdown-inside-of-menu-shadow;
+      list-style: $dropdown-inside-of-menu-list-style;
+      border: $dropdown-inside-of-menu-border;
+      width: $dropdown-inside-of-menu-width;
+      background: $dropdown-bg;
+      color: $dropdown-header-color;
+
+      li,
+      .portlet-menu-cascade-item {
+        a {
+          &.disabled {
+            color: $dropdown-link-disabled-color;
+          }
+
+          &:hover,
+          &.portlet-menu-item-hover,
+          &.portlet-menu-cascade-item-hover {
+            color: $navbar-light-hover-color;
+          }
+        }
+
+        &:active,
+        &.portlet-menu-cascade-item-selected {
+          background-color: $nav-pills-link-active-bg;
+          color: $nav-pills-link-active-color;
+
+          > a {
+            background-color: $nav-pills-link-active-bg;
+            color: $nav-pills-link-active-color;
+          }
+        }
+      }
+    }
+  }
+
+  .portlet-menu-description {
+    color: $info;
+  }
+
+  .portlet-menu-caption {
+    @extend h3;
+  }
+}
+
+.dropdown-menu {
+  background-clip: $stand-along-dropdown-background-clip;
+  background: $dropdown-bg;
+  border: $stand-along-dropdown-border;
+  border-radius: $nav-pills-border-radius;
+  box-shadow: $stand-along-dropdown-box-shadow;
+  float: $stand-along-dropdown-float;
+  font-size: $font-size-base;
+  left: $stand-along-dropdown-left;
+  list-style: $stand-along-dropdown-list-style;
+  margin: $stand-along-dropdown-margin;
+  min-width: $stand-along-dropdown-min-width;
+  padding: $stand-along-dropdown-padding;
+  position: $stand-along-dropdown-position;
+  text-align: $stand-along-dropdown-text-align;
+  top: $stand-along-dropdown-top;
+  z-index: $zindex-dropdown;
+  color: $dropdown-header-color;
+
+  li {
+    a {
+      color: $dropdown-link-color;
+
+      &.disabled {
+        color: $dropdown-link-disabled-color;
+      }
+
+      &:hover,
+      &.portlet-menu-item-hover,
+      &.portlet-menu-cascade-item-hover {
+        background: $dropdown-link-hover-bg;
+        color: $dropdown-link-hover-color;
+      }
+    }
+
+    &:active {
+      background-color: $nav-pills-link-active-bg;
+      color: $nav-pills-link-active-color;
+
+      > a {
+        background-color: $nav-pills-link-active-bg;
+        color: $nav-pills-link-active-color;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/mixins.scss b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/mixins.scss
new file mode 100644
index 00000000000..1362024dbdb
--- /dev/null
+++ b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/mixins.scss
@@ -0,0 +1,258 @@
+/**
+ * Licensed to Apereo under one or more contributor license
+ * agreements. See the NOTICE file distributed with this work
+ * for additional information regarding copyright ownership.
+ * Apereo licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file
+ * except in compliance with the License.  You may obtain a
+ * copy of the License at the following location:
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/*
+ * Simple float. Pass in the direction; default is left.
+ */
+@mixin float($direction: left) {
+  float: $direction;
+}
+
+@mixin text-shadow($string: 0 1px 3px rgba(0, 0, 0, 0.25)) {
+  text-shadow: $string;
+}
+
+@mixin box-shadow($string) {
+  box-shadow: $string;
+}
+
+@mixin drop-shadow($x: 0, $y: 1px, $blur: 2px, $spread: 0, $alpha: 0.25) {
+  box-shadow: $x $y $blur $spread rgba(0, 0, 0, $alpha);
+}
+
+@mixin inner-shadow($x: 0, $y: 1px, $blur: 2px, $spread: 0, $alpha: 0.25) {
+  box-shadow: inset $x $y $blur $spread rgba(0, 0, 0, $alpha);
+}
+
+@mixin box-sizing($type: border-box) {
+  box-sizing: $type;
+}
+
+@mixin border-radius($radius: 5px) {
+  border-radius: $radius;
+  background-clip: padding-box;
+}
+
+@mixin border-radiuses($topleft: 0, $topright: 0, $bottomright: 0, $bottomleft: 0) {
+  border-radius: $topleft $topright $bottomright $bottomleft;
+  background-clip: padding-box;
+}
+
+@mixin border($color: $grayscale3, $size: 1px) {
+  border: $size solid $color;
+}
+
+@mixin opacity($opacity: 0.5) {
+  opacity: $opacity;
+}
+
+@mixin vertical-gradient($startColor: #eee, $endColor: white) {
+  background-color: $startColor;
+  background: linear-gradient(to bottom, $startColor, $endColor);
+}
+
+@mixin horizontal-gradient($startColor: #eee, $endColor: white) {
+  background-color: $startColor;
+  background-image: linear-gradient(to right, $startColor, $endColor);
+}
+
+@mixin transition($transition) {
+  transition: $transition;
+}
+
+@mixin transform($string) {
+  transform: $string;
+}
+
+@mixin scale($factor) {
+  transform: scale($factor);
+}
+
+@mixin rotate($deg) {
+  transform: rotate($deg);
+}
+
+@mixin translate($x, $y: 0) {
+  transform: translate($x, $y);
+}
+
+@mixin translate3d($x, $y: 0, $z: 0) {
+  transform: translate3d($x, $y, $z);
+}
+
+/*
+ * Base formatting for converting a block-list to an inline-list.
+ */
+@mixin inline-block-list {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+/*
+ * Useful CSS3 SCSS Mixins
+ * Converted from LESS to SCSS
+ */
+
+@mixin text-shadow($string: 0 1px 3px rgba(0, 0, 0, 0.25)) {
+  text-shadow: $string;
+}
+
+@mixin box-shadow($string) {
+  box-shadow: $string;
+}
+
+@mixin drop-shadow($x: 0, $y: 1px, $blur: 2px, $spread: 0, $alpha: 0.25) {
+  box-shadow: $x $y $blur $spread rgb(0 0 0 / $alpha);
+}
+
+@mixin inner-shadow($x: 0, $y: 1px, $blur: 2px, $spread: 0, $alpha: 0.25) {
+  box-shadow: inset $x $y $blur $spread rgb(0 0 0 / $alpha);
+}
+
+@mixin box-sizing($type: border-box) {
+  box-sizing: $type;
+}
+
+@mixin border-radius($radius: 5px) {
+  border-radius: $radius;
+  background-clip: padding-box;
+}
+
+@mixin border-radiuses($topright: 0, $bottomright: 0, $bottomleft: 0, $topleft: 0) {
+  border-radius: $topleft $topright $bottomright $bottomleft;
+  background-clip: padding-box;
+}
+
+@mixin border-radiuses-top($top: 0) {
+  border-top-right-radius: $top;
+  border-top-left-radius: $top;
+}
+
+@mixin border-radiuses-bottom($bottom: 0) {
+  border-bottom-right-radius: $bottom;
+  border-bottom-left-radius: $bottom;
+}
+
+@mixin border($color: $grayscale3, $size: 1px) {
+  border: $size solid $color;
+}
+
+@mixin opacity($opacity: 0.5) {
+  opacity: $opacity;
+}
+
+@mixin vertical-gradient($startColor: #eee, $endColor: white) {
+  background-color: $startColor;
+  background: linear-gradient(to bottom, $startColor, $endColor);
+}
+
+@mixin horizontal-gradient($startColor: #eee, $endColor: white) {
+  background-color: $startColor;
+  background-image: linear-gradient(to right, $startColor, $endColor);
+}
+
+@mixin gradient($background, $gradient: false) {
+  background-color: $background;
+  @if $gradient == true {
+    background: linear-gradient(to bottom, $background, darken($background, 10%));
+  }
+}
+
+@mixin animation($name, $duration: 300ms, $delay: 0, $ease: ease) {
+  animation: $name $duration $delay $ease;
+}
+
+@mixin transition($transition) {
+  transition: $transition;
+}
+
+@mixin transform($string) {
+  transform: $string;
+}
+
+@mixin scale($factor) {
+  transform: scale($factor);
+}
+
+@mixin rotate($deg) {
+  transform: rotate($deg);
+}
+
+@mixin skew($deg, $deg2) {
+  transform: skew($deg, $deg2);
+}
+
+@mixin translate($x, $y: 0) {
+  transform: translate($x, $y);
+}
+
+@mixin translate3d($x, $y: 0, $z: 0) {
+  transform: translate3d($x, $y, $z);
+}
+
+@mixin perspective($value: 1000) {
+  perspective: $value;
+}
+
+@mixin transform-origin($x: center, $y: center) {
+  transform-origin: $x $y;
+}
+
+@mixin pretty-buttons($color, $background, $text-shadow: none) {
+  background-color: lighten($background, 5%);
+  background: linear-gradient(to bottom, lighten($background, 5%), darken($background, 10%));
+  color: $color;
+  border-color: darken($background, 10%);
+  border-bottom-color: darken($background, 20%);
+  text-shadow: $text-shadow;
+  @include box-shadow(inset 0 1px 0 rgba(255, 255, 255, 0.1));
+
+  &:hover,
+  &:focus,
+  &:active,
+  &.active {
+    background: linear-gradient(to bottom, $background, darken($background, 10%));
+    border-color: darken($background, 20%);
+    color: $color;
+  }
+
+  &.disabled,
+  &:disabled,
+  fieldset[disabled] & {
+    &,
+    &:hover,
+    &:focus,
+    &:active,
+    &.active {
+      background-color: $background;
+      border-color: darken($background, 5%);
+    }
+  }
+}
+
+@mixin contrasted($background-color, $dark: $contrasted-dark-default, $light: $contrasted-light-default, $threshold: $contrasted-lightness-threshold) {
+  background: $background-color;
+  // SCSS doesn't have contrast() function like LESS, use manual logic
+  @if lightness($background-color) > $threshold {
+    color: $dark;
+  } @else {
+    color: $light;
+  }
+}
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/navigation.less b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/navigation.scss
similarity index 74%
rename from uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/navigation.less
rename to uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/navigation.scss
index 06c746a0fd1..846f01fe961 100644
--- a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/navigation.less
+++ b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/navigation.scss
@@ -20,7 +20,7 @@
 /**
  * Menu accessed through a (typically) 'hamburger' icon;  traditionally for small displays.
  */
-.use-hamburger-menu-mixin {
+@mixin use-hamburger-menu-mixin {
   position: relative;
   top: 0;
   left: 0;
@@ -34,7 +34,7 @@
     transform: translate3d(270px, 0, 0) scale3d(1, 1, 1);
 
     #portalNavigation {
-      filter: ~"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
       opacity: 1 !important;
       transform: translate3d(10px, 0, 0) !important;
       z-index: 4 !important;
@@ -42,7 +42,7 @@
   }
 
   .portal-nav {
-    background: @navbar-background-color;
+    background: $navbar-background-color;
     position: relative;
     z-index: -1; /* do not change */
 
@@ -54,17 +54,9 @@
       backface-visibility: hidden;
 
       #portalNavigation {
-        top: @mobile-navbar-top-position;
-        filter: ~"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
+        top: $mobile-navbar-top-position;
+        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
         opacity: 0.7;
-        transition:
-          z-index 350ms ease,
-          opacity 350ms ease,
-          -moz-transform 350ms ease;
-        transition:
-          z-index 350ms ease,
-          opacity 350ms ease,
-          -o-transform 350ms ease;
         transition:
           z-index 350ms ease,
           opacity 350ms ease,
@@ -75,46 +67,46 @@
         z-index: -10; /* do not change */
 
         ul.menu {
-          .inline-block-list;
+          @include inline-block-list;
 
           background-color: transparent;
           width: 260px;
 
           .list-group-item {
             padding: 0;
-            border-bottom: 1px solid lighten(@offcanvas-background-color, 25%);
-            border-left: 0 solid lighten(@offcanvas-background-color, 25%);
-            border-right: 0 solid lighten(@offcanvas-background-color, 25%);
-            border-top: 1px solid lighten(@offcanvas-background-color, 25%);
+            border-bottom: 1px solid lighten($offcanvas-background-color, 25%);
+            border-left: 0 solid lighten($offcanvas-background-color, 25%);
+            border-right: 0 solid lighten($offcanvas-background-color, 25%);
+            border-top: 1px solid lighten($offcanvas-background-color, 25%);
             border-radius: 0 !important;
-            background-color: @mobile-navbar-item-background-color;
+            background-color: $mobile-navbar-item-background-color;
 
             &.active,
             &.active:hover,
             &.active:focus {
               z-index: 2;
-              color: @mobile-navbar-item-active-text-color;
-              background-color: @mobile-navbar-item-active-background-color;
+              color: $mobile-navbar-item-active-text-color;
+              background-color: $mobile-navbar-item-active-background-color;
               border-color: transparent;
             }
 
             &.active {
               z-index: 2;
-              color: @mobile-navbar-item-active-text-color;
-              background-color: @mobile-navbar-item-active-background-color;
+              color: $mobile-navbar-item-active-text-color;
+              background-color: $mobile-navbar-item-active-background-color;
               border-color: transparent;
 
               &.open {
                 a.dropdown-toggle {
                   &:focus,
                   &:active {
-                    color: @navbar-controls-color;
+                    color: $navbar-controls-color;
                   }
                 }
               }
 
               a {
-                color: @mobile-navbar-item-active-text-color !important;
+                color: $mobile-navbar-item-active-text-color !important;
 
                 &.portal-navigation-gripper {
                   position: absolute;
@@ -123,14 +115,14 @@
                   left: 2px;
                   font-size: 6pt;
                   padding: 2px;
-                  color: @navbar-controls-color;
+                  color: $navbar-controls-color;
                   cursor: move;
                   line-height: normal;
                   display: inline;
                   opacity: 0.2;
 
                   &:hover {
-                    color: @navbar-controls-hover-color;
+                    color: $navbar-controls-hover-color;
                     opacity: 0.9;
                   }
 
@@ -149,12 +141,12 @@
                   font-size: 8pt;
                   line-height: normal;
                   margin-top: -3px;
-                  color: @navbar-controls-color;
+                  color: $navbar-controls-color;
                   display: inline;
                   opacity: 0.2;
 
                   &:hover {
-                    color: @navbar-controls-hover-color;
+                    color: $navbar-controls-hover-color;
                     opacity: 0.9;
                   }
 
@@ -180,8 +172,8 @@
             a {
               &.portal-navigation-link {
                 display: block;
-                color: @navbar-item-text-color;
-                background: @navbar-item-background-color;
+                color: $navbar-item-text-color;
+                background: $navbar-item-background-color;
                 font-weight: inherit;
                 text-decoration: none;
                 padding: 8px 24px;
@@ -195,8 +187,8 @@
 
                 &:hover,
                 &:focus {
-                  background: @navbar-item-hover-background-color;
-                  color: @navbar-item-hover-text-color;
+                  background: $navbar-item-hover-background-color;
+                  color: $navbar-item-hover-text-color;
 
                   i {
                     opacity: 1;
@@ -241,12 +233,12 @@
             }
 
             div.fl-inlineEditContainer {
-              background: @navbar-item-active-background-color;
+              background: $navbar-item-active-background-color;
               padding: 2px 15px 3px;
 
               input.flc-inlineEdit-edit {
                 border: medium none;
-                color: @grayscale10;
+                color: $grayscale10;
                 margin-top: 8px;
                 margin-bottom: 7px;
                 margin-right: 5px;
@@ -268,27 +260,27 @@
               border-radius: 0;
 
               li.portal-subnav {
-                border-bottom: 1px solid @black;
+                border-bottom: 1px solid $black;
                 width: 100%;
                 min-width: 100%;
-                color: @black;
+                color: $black;
 
                 &:last-child {
-                  border-bottom: 0 solid @black;
+                  border-bottom: 0 solid $black;
                 }
 
                 a.portal-subnav-link {
                   width: 100%;
                   min-width: 100%;
-                  color: @black !important;
-                  background-color: @white;
+                  color: $black !important;
+                  background-color: $white;
                 }
 
                 a {
                   &:hover,
                   &:focus {
-                    background: @navbar-item-active-hover-background-color;
-                    color: @mobile-navbar-flyout-item-active-hover-text-color !important;
+                    background: $navbar-item-active-hover-background-color;
+                    color: $mobile-navbar-flyout-item-active-hover-text-color !important;
                   }
                 }
               }
@@ -312,7 +304,7 @@
 /**
  * Menu accessed through tabs;  traditionally for large displays.
  */
-.use-tabs-menu-mixin {
+@mixin use-tabs-menu-mixin {
   /* Intended to undo the rules for small displays above */
   position: initial;
   left: initial;
@@ -328,10 +320,10 @@
         * Convert navigation from toggled block menu to inline tabs.
         */
     .portal-nav {
-      background: @navbar-background-color;
-      border-top: @navbar-border-size solid @navbar-border-color;
-      border-bottom: @navbar-border-size solid @navbar-border-color;
-      font-weight: @navbar-item-font-weight;
+      background: $navbar-background-color;
+      border-top: $navbar-border-size solid $navbar-border-color;
+      border-bottom: $navbar-border-size solid $navbar-border-color;
+      font-weight: $navbar-item-font-weight;
 
       .sidebar-offcanvas {
         /* Intended to undo the rules for small displays above */
@@ -346,7 +338,7 @@
         }
 
         #portalNavigationTabGroup {
-          background-color: @tabgroup-background-color;
+          background-color: $tabgroup-background-color;
           margin-left: -15px;
           padding-left: 15px;
           margin-right: -15px;
@@ -354,7 +346,7 @@
 
           #portalNavigationTabGroupsList {
             display: inline-block;
-            .inline-block-list;
+            @include inline-block-list;
 
             margin-left: 64px;
             margin-bottom: -4px;
@@ -363,8 +355,8 @@
             :not(.active).list-group-item {
               &:hover,
               &:focus {
-                background-color: @tabgroup-item-hover-background-color;
-                color: @tabgroup-item-hover-text-color;
+                background-color: $tabgroup-item-hover-background-color;
+                color: $tabgroup-item-hover-text-color;
               }
             }
 
@@ -375,10 +367,10 @@
               margin-right: 0;
               border: none;
               border-radius: 0 !important;
-              .float;
+              @include float;
 
               border-width: 0;
-              background-color: @tabgroup-item-background-color;
+              background-color: $tabgroup-item-background-color;
 
               &:last-child {
                 border-bottom: initial;
@@ -386,26 +378,26 @@
 
               a.portal-navigation-link {
                 display: inline-block;
-                color: @tabgroup-item-text-color;
+                color: $tabgroup-item-text-color;
                 margin: 0;
                 padding: 1px 5px;
 
                 &:hover,
                 &:focus {
                   background-color: transparent;
-                  color: @tabgroup-item-hover-text-color;
+                  color: $tabgroup-item-hover-text-color;
                 }
               }
             }
 
             .active {
-              background-color: @tabgroup-item-active-background-color;
-              color: @tabgroup-item-active-text-color;
+              background-color: $tabgroup-item-active-background-color;
+              color: $tabgroup-item-active-text-color;
 
               &:hover,
               &:focus {
-                background-color: @tabgroup-item-active-hover-background-color;
-                color: @tabgroup-item-active-hover-text-color;
+                background-color: $tabgroup-item-active-hover-background-color;
+                color: $tabgroup-item-active-hover-text-color;
               }
             }
           }
@@ -413,16 +405,23 @@
 
         ul.menu {
           display: block;
-          .inline-block-list;
+          @include inline-block-list;
 
           margin-left: 64px;
           width: initial;
+          
+          /* Clearfix for floated children */
+          &::after {
+            content: "";
+            display: table;
+            clear: both;
+          }
 
           :not(.active).list-group-item {
             &:hover,
             &:focus {
-              background-color: @navbar-item-hover-background-color;
-              color: @navbar-item-hover-text-color;
+              background-color: $navbar-item-hover-background-color;
+              color: $navbar-item-hover-text-color;
             }
           }
 
@@ -447,7 +446,7 @@
             margin-right: 0;
             border: none;
             border-radius: 0 !important;
-            .float;
+            @include float;
 
             border-width: 0;
             background-color: transparent;
@@ -461,12 +460,12 @@
 
               /* line-height: 30px; */
               margin: 0;
-              padding: 1px 5px;
+              padding: 6px 15px;
 
               &:hover,
               &:focus {
                 background-color: transparent;
-                color: @navbar-item-hover-text-color;
+                color: $navbar-item-hover-text-color;
               }
             }
 
@@ -478,14 +477,14 @@
                 left: 2px;
                 font-size: 6pt;
                 padding: 2px;
-                color: @navbar-controls-color;
+                color: $navbar-controls-color;
                 cursor: move;
                 line-height: normal;
                 display: inline;
                 opacity: 0.2;
 
                 &:hover {
-                  color: @navbar-controls-hover-color;
+                  color: $navbar-controls-hover-color;
                   opacity: 0.9;
                 }
 
@@ -508,12 +507,12 @@
                 font-size: 8pt;
                 line-height: normal;
                 margin-top: -3px;
-                color: @navbar-controls-color;
+                color: $navbar-controls-color;
                 display: inline;
                 opacity: 0.2;
 
                 &:hover {
-                  color: @navbar-controls-hover-color;
+                  color: $navbar-controls-hover-color;
                   opacity: 0.9;
                 }
 
@@ -528,12 +527,12 @@
             }
 
             div.fl-inlineEditContainer {
-              background: @navbar-item-active-background-color;
+              background: $navbar-item-active-background-color;
               padding: 0 4px;
 
               input.flc-inlineEdit-edit {
                 border: medium none;
-                color: @grayscale10;
+                color: $grayscale10;
                 margin: 0 auto;
               }
 
@@ -547,7 +546,7 @@
             &.useflyout {
               a.portal-navigation-link,
               div.fl-inlineEditContainer {
-                padding: 1px 5px;
+                padding: 6px 15px;
                 width: auto;
               }
 
@@ -579,28 +578,28 @@
               margin-top: -1px; /* do not remove */
 
               li.portal-subnav {
-                border-bottom: 1px solid @black;
+                border-bottom: 1px solid $black;
                 width: 100%;
                 min-width: 100%;
-                color: @black;
+                color: $black;
 
                 &:last-child {
-                  border-bottom: 0 solid @black;
+                  border-bottom: 0 solid $black;
                 }
 
                 a.portal-subnav-link {
                   width: 100%;
                   min-width: 100%;
-                  color: @black;
-                  background-color: @white;
+                  color: $black;
+                  background-color: $white;
                   z-index: 6;
                 }
 
                 a {
                   &:hover,
                   &:focus {
-                    background: @navbar-item-active-hover-background-color;
-                    color: @white;
+                    background: $navbar-item-active-hover-background-color;
+                    color: $white;
                   }
                 }
               }
@@ -608,8 +607,8 @@
           }
 
           .active {
-            background-color: @navbar-item-active-background-color;
-            color: @navbar-item-active-text-color;
+            background-color: $navbar-item-active-background-color;
+            color: $navbar-item-active-text-color;
 
             &:hover,
             &:focus {
@@ -634,46 +633,46 @@
 
 @media screen {
   /**
-    * For the moment, please, do not remove `max-with: @screen-xs-max` media query, the desktop css rules won't be ok:
+    * For the moment, please, do not remove `max-with: 767px` media query, the desktop css rules won't be ok:
     * to much do/undo rules / difference hierarchy in code. will fix that later
     * This is a special case of mobile first and it can facilitate customSkin, see comments in skin.less
     */
 
-  /* Class 'up-use-tabs-none' and screens under @screen-sm-max are always hamburger */
+  /* Class 'up-use-tabs-none' and screens under 767px are always hamburger */
   .row-offcanvas.up-use-tabs-none {
-    .use-hamburger-menu-mixin();
+    @include use-hamburger-menu-mixin;
   }
 
-  /* Class 'up-use-tabs-sm' uses tabs above @screen-sm-min */
+  /* Class 'up-use-tabs-sm' uses tabs above 576px */
   .row-offcanvas.up-use-tabs-sm {
-    @media (max-width: @screen-xs-max) {
-      .use-hamburger-menu-mixin();
+    @media (max-width: 575px) {
+      @include use-hamburger-menu-mixin;
     }
 
-    @media (min-width: @screen-sm-min) {
-      .use-tabs-menu-mixin();
+    @media (min-width: 576px) {
+      @include use-tabs-menu-mixin;
     }
   }
 
-  /* Class 'up-use-tabs-md' uses tabs above @screen-md-min */
+  /* Class 'up-use-tabs-md' uses tabs above 768px */
   .row-offcanvas.up-use-tabs-md {
-    @media (max-width: @screen-sm-max) {
-      .use-hamburger-menu-mixin();
+    @media (max-width: 767px) {
+      @include use-hamburger-menu-mixin;
     }
 
-    @media (min-width: @screen-md-min) {
-      .use-tabs-menu-mixin();
+    @media (min-width: 768px) {
+      @include use-tabs-menu-mixin;
     }
   }
 
-  /* Class 'up-use-tabs-lg' uses tabs above @screen-lg-min */
+  /* Class 'up-use-tabs-lg' uses tabs above 992px */
   .row-offcanvas.up-use-tabs-lg {
-    @media (max-width: @screen-md-max) {
-      .use-hamburger-menu-mixin();
+    @media (max-width: 991px) {
+      @include use-hamburger-menu-mixin;
     }
 
-    @media (min-width: @screen-lg-min) {
-      .use-tabs-menu-mixin();
+    @media (min-width: 992px) {
+      @include use-tabs-menu-mixin;
     }
   }
-}
+}
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/no-chrome.less b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/no-chrome.scss
similarity index 97%
rename from uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/no-chrome.less
rename to uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/no-chrome.scss
index ca7bc1b7ed3..ee819ad019c 100644
--- a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/no-chrome.less
+++ b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/no-chrome.scss
@@ -46,9 +46,9 @@
       }
 
       .portlet-options-menu > a {
-        color: @grayscale10;
+        color: $grayscale10;
         opacity: 0.8;
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/personalization.less b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/personalization.scss
similarity index 93%
rename from uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/personalization.less
rename to uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/personalization.scss
index 17393d17472..83333585b47 100644
--- a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/personalization.less
+++ b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/personalization.scss
@@ -22,8 +22,8 @@
 
 .fl-reorderer-dropMarker {
   /* Indicate where the item may be dropped. */
-  background-color: @color2;
-  border: 2px dashed @color2-darker;
+  background-color: $color2;
+  border: 2px dashed $color2-darker;
   height: 200px;
   margin-bottom: 1em;
-}
+}
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/portal-admin.less b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/portal-admin.scss
similarity index 97%
rename from uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/portal-admin.less
rename to uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/portal-admin.scss
index 86d49705d61..d3013850906 100644
--- a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/portal-admin.less
+++ b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/portal-admin.scss
@@ -19,6 +19,6 @@
 .groupsmanager {
   .label {
     font-size: 100%;
-    color: @grayscale8;
+    color: $grayscale8;
   }
-}
+}
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/portlet-manager.less b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/portlet-manager.scss
similarity index 88%
rename from uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/portlet-manager.less
rename to uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/portlet-manager.scss
index 94a06d399e3..2f4fa633c21 100644
--- a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/portlet-manager.less
+++ b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/portlet-manager.scss
@@ -27,9 +27,9 @@
         margin: 1em 0;
 
         .title {
-          background-color: @color4-light;
-          border-bottom: 2px solid @color4-lighter;
-          color: @grayscale9;
+          background-color: $color4-light;
+          border-bottom: 2px solid $color4-lighter;
+          color: $grayscale9;
           border-radius: 4px;
           font-weight: 400;
           margin: 0;
@@ -51,7 +51,7 @@
 
   .form-group {
     label {
-      color: @grayscale10;
+      color: $grayscale10;
     }
   }
 
@@ -80,14 +80,14 @@
   }
 
   .buttons {
-    border-top: 1px dotted @grayscale4;
-    border-bottom: 1px dotted @grayscale4;
+    border-top: 1px dotted $grayscale4;
+    border-bottom: 1px dotted $grayscale4;
     margin: 1em 0;
     padding: 1em 0;
   }
 
   .glyphicon-info-sign {
-    color: @color1;
+    color: $color1;
   }
 
   .parameter-editor-value {
@@ -103,4 +103,4 @@
       padding: 5px 15px;
     }
   }
-}
+}
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/portlet.less b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/portlet.scss
similarity index 55%
rename from uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/portlet.less
rename to uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/portlet.scss
index 10211558f92..db663de0b7e 100644
--- a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/portlet.less
+++ b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/portlet.scss
@@ -18,7 +18,7 @@
  */
 
 /*
- * This file is for LESS rules that apply to "framework portlets," which are
+ * This file is for SCSS rules that apply to "framework portlets," which are
  * portlets implemented in the uPortal webapp itself.  (Styles that apply
  * specifically to non-framework portlets should ideally be managed in their
  * respective projects.)  At a certain critical mass, these rules should
@@ -28,9 +28,9 @@
 /* fragment-admin-exit */
 #portalFragAdminExit {
   /* These colors are a bit drab, but safe
-       given the current system in variables.less */
-  background-color: @footer-background-color;
-  color: @footer-text-color;
+       given the current system in variables.scss */
+  background-color: $footer-background-color;
+  color: $footer-text-color;
   padding: 8px;
 
   h2 {
@@ -50,7 +50,7 @@
 /* Permissions by Category */
 .permission-lookup {
   background: #eee;
-  border: 1px solid @grayscale4;
+  border: 1px solid $grayscale4;
   padding: 15px;
   margin: 10px;
   border-radius: 5px;
@@ -61,13 +61,13 @@
   }
 
   .up-autocomplete-dropdown {
-    background: @white;
-    border: 1px solid @grayscale4;
+    background: $white;
+    border: 1px solid $grayscale4;
     border-radius: 4px;
     width: 160px;
-    box-shadow: 0 0 5px 0 @grayscale6;
+    box-shadow: 0 0 5px 0 $grayscale6;
     position: absolute;
-    z-index: @zindex-dropdown;
+    z-index: $zindex-dropdown;
     display: none;
 
     .alert {
@@ -85,13 +85,13 @@
       margin-bottom: 0;
 
       .up-autocomplete-match {
-        border-bottom: 1px solid @gray-lighter;
+        border-bottom: 1px solid $gray-300;
         padding: 5px;
 
         &:hover {
           cursor: pointer;
-          background: @gray-lighter;
-          color: @black;
+          background: $gray-300;
+          color: $black;
         }
 
         a {
@@ -111,12 +111,12 @@
 
       &:hover {
         cursor: pointer;
-        background: @gray-lighter;
-        color: @black;
+        background: $gray-300;
+        color: $black;
       }
 
       a {
-        color: @grayscale6;
+        color: $grayscale6;
         font-size: 11px;
 
         &:hover {
@@ -171,7 +171,7 @@
 }
 
 /* Display only for desktop */
-@media only screen and (min-width: @screen-sm-min) {
+@media only screen and (min-width: 576px) {
   .favorites {
     /* Hide the navbar-brand text */
     .navbar-brand {
@@ -181,11 +181,120 @@
 }
 
 /* Display only for mobile */
-@media only screen and (max-width: @screen-sm-max) {
+@media only screen and (max-width: 767px) {
   .favorites {
     /* Show a border around the navbar */
     .navbar {
-      border: 1px solid @grayscale2;
+      border: 1px solid $grayscale2;
     }
   }
 }
+
+/* Login Portal */
+.portal-login {
+  .portal-login-inner {
+    text-align: center;
+    padding: 0;
+    
+    #portalCASLogin {
+      .btn {
+        margin: 0.25rem;
+        
+        i {
+          margin-right: 0.5rem;
+        }
+      }
+    }
+  }
+}
+
+/* Search Portal */
+.portal-search {
+  padding: 0;
+}
+
+/* Attributes Swapper Buttons */
+.buttons {
+  .button.btn {
+    display: inline-block;
+    padding: 6px 12px;
+    margin: 0;
+    font-size: 14px;
+    color: rgb(105, 105, 105);
+    background: rgb(239, 239, 239);
+    border: 1px solid rgba(0, 0, 0, 0);
+    border-radius: 4px;
+  }
+}
+
+/* Primary Buttons */
+.button.btn.btn-primary,
+a.button.btn.btn-primary {
+  display: inline-block;
+  padding: 6px 12px;
+  margin: 0;
+  font-size: 14px;
+  color: rgb(255, 255, 255);
+  background: rgb(51, 122, 183);
+  border: 1px solid rgb(46, 109, 164);
+  border-radius: 4px;
+  text-decoration: none;
+}
+
+/* Emergency Alert Page Styling */
+h2.title {
+  font-size: 17.5px;
+  font-weight: 500;
+  color: rgb(51, 51, 51);
+}
+
+.lead.bg-warning {
+  background: rgb(252, 248, 227) !important;
+  color: rgb(51, 51, 51);
+  padding: 0;
+  font-size: 21px;
+  border-radius: 0;
+  margin: 0 0 20px;
+  
+  strong {
+    font-weight: 700;
+  }
+}
+
+.btn.btn-primary.btn-lg {
+  background: rgb(51, 122, 183);
+  border: 1px solid rgb(46, 109, 164);
+  padding: 10px 16px;
+  font-size: 18px;
+  color: rgb(255, 255, 255);
+  border-radius: 6px;
+}
+
+/* Portlet Drag and Drop */
+.layout-draggable-drop-target {
+  background-color: #e6f3ff !important;
+  border: 2px dashed #0066cc !important;
+  border-radius: 4px;
+  height: 80px !important;
+  min-height: 80px !important;
+  width: 100% !important;
+  box-sizing: border-box;
+  margin: 10px 0;
+  text-align: center;
+  color: #0066cc;
+  font-weight: bold;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  position: relative !important;
+  z-index: 9999 !important;
+}
+
+.layout-draggable-drop-target span {
+  font-size: 14px;
+  pointer-events: none;
+}
+
+.ui-draggable-dragging {
+  z-index: 9999 !important;
+}
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/rating.less b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/rating.scss
similarity index 65%
rename from uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/rating.less
rename to uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/rating.scss
index d5f1d17cbca..2d982dae4de 100644
--- a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/rating.less
+++ b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/rating.scss
@@ -1,3 +1,22 @@
+/**
+ * Licensed to Apereo under one or more contributor license
+ * agreements. See the NOTICE file distributed with this work
+ * for additional information regarding copyright ownership.
+ * Apereo licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file
+ * except in compliance with the License.  You may obtain a
+ * copy of the License at the following location:
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
 /**
  * Accessible pure css rating system
  *
@@ -50,7 +69,7 @@
   > input {
     width: 0;
     opacity: 0;
-    margin-left: -(@font-size-base / 2); // center behind star
+    margin-left: -($font-size-base / 2); // center behind star
   }
 }
 
@@ -69,7 +88,7 @@
     content: "★";
     position: absolute;
     left: 0;
-    color: @rating-selected-color;
+    color: $rating-selected-color;
   }
 }
 
@@ -83,6 +102,6 @@
     content: "★";
     position: absolute;
     left: 0;
-    color: @rating-selected-color;
+    color: $rating-selected-color;
   }
-}
+}
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/regions.less b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/regions.scss
similarity index 75%
rename from uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/regions.less
rename to uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/regions.scss
index 8e6a9849599..f737926beda 100644
--- a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/regions.less
+++ b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/regions.scss
@@ -43,13 +43,13 @@
       list-style: none;
       padding: 0 4px;
       top: -1em;
-      background-color: @grayscale2;
+      background-color: $grayscale2;
 
       .hover-option {
         display: inline-block;
 
         a {
-          color: @grayscale9;
+          color: $grayscale9;
         }
       }
     }
@@ -63,8 +63,14 @@
     position: fixed;
     top: 0;
     left: 0;
-    z-index: @zindex-navbar-fixed;
+    z-index: $zindex-fixed;
     width: 100%;
+    
+    // Override Bootstrap 5 container-fluid padding to match release version
+    &.container-fluid {
+      padding-left: 15px;
+      padding-right: 15px;
+    }
 
     #region-eyebrow {
       padding: 2px 0;
@@ -93,7 +99,6 @@
     text-transform: none;
     transition-duration: 0.15s;
     transition-property: opacity, filter;
-    transition-property: opacity, filter, filter;
     transition-timing-function: linear;
 
     &:hover {
@@ -109,7 +114,7 @@
   }
 
   .hamburger-inner {
-    background-color: @menu-toggle-text-color; // Middle line of the hamburger
+    background-color: $menu-toggle-text-color; // Middle line of the hamburger
     border-radius: 4px;
     display: block;
     height: 2px;
@@ -117,17 +122,13 @@
     position: absolute;
     top: 50%;
     transition-duration: 0.15s;
-    transition-property: -webkit-transform;
     transition-property: transform;
-    transition-property:
-      transform,
-      -webkit-transform;
     transition-timing-function: ease; /* Safari */
     transition-delay: 350ms;
     width: 15px;
 
     &::before {
-      background-color: @menu-toggle-text-color; // Top line of the hamburger
+      background-color: $menu-toggle-text-color; // Top line of the hamburger
       border-radius: 4px;
       content: "";
       display: block;
@@ -135,18 +136,14 @@
       position: absolute;
       top: -5px;
       transition-duration: 0.15s;
-      transition-property: -webkit-transform;
       transition-property: transform;
-      transition-property:
-        transform,
-        -webkit-transform;
       transition-timing-function: ease; /* Safari */
       transition-delay: 350ms;
       width: 15px;
     }
 
     &::after {
-      background-color: @menu-toggle-text-color; // Bottom line of the hamburger
+      background-color: $menu-toggle-text-color; // Bottom line of the hamburger
       border-radius: 4px;
       bottom: -5px;
       content: "";
@@ -154,11 +151,7 @@
       height: 2px;
       position: absolute;
       transition-duration: 0.15s;
-      transition-property: -webkit-transform;
       transition-property: transform;
-      transition-property:
-        transform,
-        -webkit-transform;
       transition-timing-function: ease; /* Safari */
       transition-delay: 350ms;
       width: 15px;
@@ -168,29 +161,15 @@
   .hamburger-arrow {
     .hamburger-inner {
       &::before {
-        transition:
-          top 0.1s 0.15s ease,
-          -webkit-transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1);
         transition:
           top 0.1s 0.15s ease,
           transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1);
-        transition:
-          top 0.1s 0.15s ease,
-          transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1),
-          -webkit-transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1);
       }
 
       &::after {
-        transition:
-          bottom 0.1s 0.15s ease,
-          -webkit-transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1);
         transition:
           bottom 0.1s 0.15s ease,
           transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1);
-        transition:
-          bottom 0.1s 0.15s ease,
-          transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1),
-          -webkit-transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1);
       }
     }
   }
@@ -201,38 +180,24 @@
       &::before {
         top: 0;
         transform: translate3d(-3px, -4px, 0) rotate(-45deg) scale(0.7, 1);
-        transition:
-          top 0.35s ease,
-          -webkit-transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
         transition:
           top 0.35s ease,
           transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
-        transition:
-          top 0.35s ease,
-          transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22),
-          -webkit-transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
       }
 
       &::after {
         bottom: 0;
         transform: translate3d(-3px, 4px, 0) rotate(45deg) scale(0.7, 1);
-        transition:
-          bottom 0.35s ease,
-          -webkit-transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
         transition:
           bottom 0.35s ease,
           transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
-        transition:
-          bottom 0.35s ease,
-          transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22),
-          -webkit-transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
       }
     }
   }
 
   .active {
     #up-sticky-nav {
-      border-left: thin solid @grayscale7; // little 3D effect when the offcanvas is open
+      border-left: thin solid $grayscale7; // little 3D effect when the offcanvas is open
     }
   }
 
@@ -241,14 +206,14 @@
        ========================================================================== */
   #region-header-bottom {
     .up-portlet-wrapper {
-      color: @white;
+      color: $white;
 
       a {
         color: #b2cce1;
       }
 
       a:hover {
-        color: @white;
+        color: $white;
       }
     }
   }
@@ -258,6 +223,12 @@
        ========================================================================== */
   #region-customize {
     position: relative;
+    
+    .background-preference [id*="background-edit-control"] {
+      position: absolute;
+      right: 12px;
+      top: 0;
+    }
 
     button {
       margin-top: -1px;
@@ -266,6 +237,16 @@
       margin-left: 0;
       padding: 6px 15px 0;
       font-size: 12px;
+      
+      /* Bootstrap 3 btn-default styling */
+      background-color: #fff;
+      border-color: #ccc;
+      color: #333;
+      
+      &:hover {
+        background-color: #e6e6e6;
+        border-color: #adadad;
+      }
 
       button:focus {
         outline: none;
@@ -282,16 +263,10 @@
 
     #customizeOptions {
       background-color: rgb(239 239 239);
-      .border(@grayscale4);
+      @include border($grayscale4);
     }
 
-    #customizeOptions + button i::after {
-      content: "\f0d7";
-    }
 
-    #customizeOptions.in + button i::after {
-      content: "\f0d8";
-    }
   }
 
   /* ==========================================================================
@@ -309,7 +284,7 @@
   }
 }
 
-@media only screen and (min-width: @screen-sm-min) {
+@media only screen and (min-width: 576px) {
   .portal {
     /* Undo sticky header styles */
     #up-sticky-nav {
@@ -336,4 +311,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/search.scss b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/search.scss
new file mode 100644
index 00000000000..40cd6f7e029
--- /dev/null
+++ b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/search.scss
@@ -0,0 +1,65 @@
+/**
+ * Licensed to Apereo under one or more contributor license
+ * agreements. See the NOTICE file distributed with this work
+ * for additional information regarding copyright ownership.
+ * Apereo licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file
+ * except in compliance with the License.  You may obtain a
+ * copy of the License at the following location:
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/* Search results portlet */
+.search-portlet {
+  .search-result {
+    h3,
+    a {
+      color: $portal-link-color !important;
+    }
+
+    .card-footer {
+      font-size: 11px;
+
+      p {
+        margin: 0;
+      }
+    }
+  }
+}
+
+/* Search styling to match release */
+#webSearchContainer {
+  .input-group {
+    height: 34px;
+  }
+  
+  .input-group .form-control {
+    font-size: 14px;
+    padding: 6px 12px;
+    height: 34px;
+    border-color: #ccc;
+    box-sizing: border-box !important;
+    line-height: 1.42857143;
+  }
+  
+  .btn {
+    background-color: #fff !important;
+    border-color: #ccc !important;
+    color: #333 !important;
+    font-size: 14px;
+    padding: 6px 12px;
+    height: 34px;
+    
+    .fa-search {
+      color: #333 !important;
+    }
+  }
+}
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/tabs.less b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/tabs.scss
similarity index 79%
rename from uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/tabs.less
rename to uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/tabs.scss
index dc868d68903..bb482c3dc42 100644
--- a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/tabs.less
+++ b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/tabs.scss
@@ -37,7 +37,7 @@
 }
 
 .tabs-below > .nav-tabs {
-  border-top: 1px solid @nav-tabs-border-color;
+  border-top: 1px solid $nav-tabs-border-color;
 }
 
 .tabs-below > .nav-tabs > li {
@@ -51,14 +51,14 @@
 
 .tabs-below > .nav-tabs > li > a:hover,
 .tabs-below > .nav-tabs > li > a:focus {
-  border-top-color: @nav-tabs-border-color;
+  border-top-color: $nav-tabs-border-color;
   border-bottom-color: transparent;
 }
 
 .tabs-below > .nav-tabs > .active > a,
 .tabs-below > .nav-tabs > .active > a:hover,
 .tabs-below > .nav-tabs > .active > a:focus {
-  border-color: transparent @nav-tabs-border-color @nav-tabs-border-color;
+  border-color: transparent $nav-tabs-border-color $nav-tabs-border-color;
 }
 
 .tabs-left > .nav-tabs > li,
@@ -76,7 +76,7 @@
 .tabs-left > .nav-tabs {
   float: left;
   margin-right: 19px;
-  border-right: 1px solid @nav-tabs-border-color;
+  border-right: 1px solid $nav-tabs-border-color;
 }
 
 .tabs-left > .nav-tabs > li > a {
@@ -86,21 +86,21 @@
 
 .tabs-left > .nav-tabs > li > a:hover,
 .tabs-left > .nav-tabs > li > a:focus {
-  border-color: @gray-lighter @nav-tabs-border-color @gray-lighter @gray-lighter;
+  border-color: $gray-lighter $nav-tabs-border-color $gray-lighter $gray-lighter;
 }
 
 .tabs-left > .nav-tabs .active > a,
 .tabs-left > .nav-tabs .active > a:hover,
 .tabs-left > .nav-tabs .active > a:focus {
-  border-color: @nav-tabs-border-color transparent @nav-tabs-border-color
-    @nav-tabs-border-color;
-  *border-right-color: @white;
+  border-color: $nav-tabs-border-color transparent $nav-tabs-border-color
+    $nav-tabs-border-color;
+  *border-right-color: $white;
 }
 
 .tabs-right > .nav-tabs {
   float: right;
   margin-left: 19px;
-  border-left: 1px solid @nav-tabs-border-color;
+  border-left: 1px solid $nav-tabs-border-color;
 }
 
 .tabs-right > .nav-tabs > li > a {
@@ -110,13 +110,13 @@
 
 .tabs-right > .nav-tabs > li > a:hover,
 .tabs-right > .nav-tabs > li > a:focus {
-  border-color: @gray-lighter @gray-lighter @gray-lighter @nav-tabs-border-color;
+  border-color: $gray-lighter $gray-lighter $gray-lighter $nav-tabs-border-color;
 }
 
 .tabs-right > .nav-tabs .active > a,
 .tabs-right > .nav-tabs .active > a:hover,
 .tabs-right > .nav-tabs .active > a:focus {
-  border-color: @nav-tabs-border-color @nav-tabs-border-color
-    @nav-tabs-border-color transparent;
-  border-left-color: @white;
-}
+  border-color: $nav-tabs-border-color $nav-tabs-border-color
+    $nav-tabs-border-color transparent;
+  border-left-color: $white;
+}
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/tags.less b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/tags.scss
similarity index 55%
rename from uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/tags.less
rename to uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/tags.scss
index 1338e692a0c..ef2963fe319 100644
--- a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/tags.less
+++ b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/tags.scss
@@ -17,7 +17,7 @@
  * under the License.
  */
 html {
-  background-color: @body-background-color;
+  background-color: $body-background-color;
   overflow-x: hidden; /* prevent horizontal scrollbar on desktop */
   min-height: 100%; /* do not use height and width properties on both html and body elements -> bug on chrome and safari with scrollTop effect with overflow-x: hidden */
   min-width: 100%;
@@ -30,7 +30,7 @@ html {
     }
 
     @media screen {
-      @media (min-width: @screen-sm-min) {
+      @media (min-width: 576px) {
         .portal-navigation-gripper::after {
           content: "";
           position: absolute;
@@ -47,68 +47,39 @@ html {
   }
 
   body {
-    // background-color: @offcanvas-background-color; /* FF3.6+ */
-
     background: -webkit-gradient(
       left top,
       right top,
-      color-stop(0%, @offcanvas-background-color),
-      color-stop(260px, darken(@offcanvas-background-color, 10%)),
-      color-stop(270px, darken(@offcanvas-background-color, 50%)),
-      color-stop(271px, @offcanvas-background-color),
-      color-stop(100%, @offcanvas-background-color)
+      color-stop(0%, $offcanvas-background-color),
+      color-stop(260px, darken($offcanvas-background-color, 10%)),
+      color-stop(270px, darken($offcanvas-background-color, 50%)),
+      color-stop(271px, $offcanvas-background-color),
+      color-stop(100%, $offcanvas-background-color)
     ); /* Chrome, Safari4+ */
 
     background: linear-gradient(
       to left,
-      @offcanvas-background-color 0%,
-      darken(@offcanvas-background-color, 10%) 260px,
-      darken(@offcanvas-background-color, 50%) 270px,
-      @offcanvas-background-color 271px,
-      @offcanvas-background-color 100%
-    ); /* Chrome10+,Safari5.1+ */
-
-    background: linear-gradient(
-      to left,
-      @offcanvas-background-color 0%,
-      darken(@offcanvas-background-color, 10%) 260px,
-      darken(@offcanvas-background-color, 50%) 270px,
-      @offcanvas-background-color 271px,
-      @offcanvas-background-color 100%
-    ); /* Opera 11.10+ */
-
-    background: linear-gradient(
-      to left,
-      @offcanvas-background-color 0%,
-      darken(@offcanvas-background-color, 10%) 260px,
-      darken(@offcanvas-background-color, 50%) 270px,
-      @offcanvas-background-color 271px,
-      @offcanvas-background-color 100%
-    ); /* IE 10+ */
-
-    background: linear-gradient(
-      to right,
-      @offcanvas-background-color 0%,
-      darken(@offcanvas-background-color, 10%) 260px,
-      darken(@offcanvas-background-color, 50%) 270px,
-      @offcanvas-background-color 271px,
-      @offcanvas-background-color 100%
+      $offcanvas-background-color 0%,
+      darken($offcanvas-background-color, 10%) 260px,
+      darken($offcanvas-background-color, 50%) 270px,
+      $offcanvas-background-color 271px,
+      $offcanvas-background-color 100%
     ); /* W3C */
 
     overflow-x: hidden;
 
     #wrapper {
-      background-color: @body-background-color;
-      background-image: @body-background-image;
+      background-color: $body-background-color;
+      background-image: $body-background-image;
     }
   }
 }
 
 /* ie9 fix */
-@media (max-width: @screen-xs-max) {
+@media (max-width: 575px) {
   html.no-csstransforms3d {
     body {
-      background-color: @offcanvas-background-color;
+      background-color: $offcanvas-background-color;
 
       .row-offcanvas {
         /* When the sidebar is active */
@@ -130,7 +101,7 @@ html {
 }
 
 /* ie9, ie10, ie11 fix */
-@media (max-width: @screen-xs-max) {
+@media (max-width: 575px) {
   html.no-flexboxlegacy {
     .row-offcanvas {
       /* When the sidebar is active */
@@ -143,14 +114,14 @@ html {
   }
 }
 
-/* Link color - uses defaultSkin/less/variables.less, not common/bootstrap/variables.less */
+/* Link color - uses defaultSkin/scss/variables.scss, not common/bootstrap/variables.scss */
 a {
-  color: @portal-link-color;
+  color: $portal-link-color;
   text-decoration: none;
 
   &:hover,
   &:focus {
-    color: @portal-link-hover-color;
+    color: $portal-link-hover-color;
     text-decoration: underline;
   }
-}
+}
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/variables.scss b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/variables.scss
new file mode 100644
index 00000000000..d91ab315940
--- /dev/null
+++ b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/variables.scss
@@ -0,0 +1,298 @@
+/**
+ * Licensed to Apereo under one or more contributor license
+ * agreements. See the NOTICE file distributed with this work
+ * for additional information regarding copyright ownership.
+ * Apereo licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file
+ * except in compliance with the License.  You may obtain a
+ * copy of the License at the following location:
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/* ==========================================================================
+   Variables
+   ========================================================================== */
+$white: #ffffff;
+$black: #000000;
+
+/*
+ * Grayscale colors. 1 is lightest, 10 is darkest.
+ */
+$grayscale1: #f5f5f5;
+$grayscale2: #e5e5e5;
+$grayscale3: #d8d8d8;
+$grayscale4: #cccccc;
+$grayscale5: #adadad;
+$grayscale6: #999999;
+$grayscale7: #8c8c8c;
+$grayscale8: #696969;
+$grayscale9: #404040;
+$grayscale10: #333333;
+
+/*
+ * Primary color with 3 lightened shades and 3 darkened shades.
+ *
+ * The variable color1 is used by the DynamicRespondrSkin portlet.
+ * 1) Do not change the variable name. It is used as a portlet preference variable name that users can override
+ *    the value of.
+ * 2) The value must be on the same line as the variable name and be terminated with a semicolon due to
+ *    regex searches by skin manager.
+ */
+$color1: #4065b0; // medium blue
+$color1-light: lighten($color1, 10%);
+$color1-lighter: lighten($color1, 25%);
+$color1-lightest: lighten($color1, 50%);
+$color1-dark: darken($color1, 10%);
+$color1-darker: darken($color1, 25%);
+$color1-darkest: darken($color1, 50%);
+
+/*
+ * Secondary color with 3 lightened shades and 3 darkened shades.
+ *
+ * The variable color2 is used by the DynamicRespondrSkin portlet.
+ * 1) Do not change the variable name. It is used as a portlet preference variable name that users can override
+ *    the value of.
+ * 2) The value must be on the same line as the variable name and be terminated with a semicolon due to
+ *    regex searches by skin manager.
+ */
+$color2: #f68923; // muted orange
+$color2-light: lighten($color2, 10%);
+$color2-lighter: lighten($color2, 25%);
+$color2-lightest: lighten($color2, 50%);
+$color2-dark: darken($color2, 10%);
+$color2-darker: darken($color2, 25%);
+$color2-darkest: darken($color2, 50%);
+
+/*
+ * Link color with 1 lighter shade.
+ *
+ * The variable color3 is used by the DynamicRespondrSkin portlet.
+ * 1) Do not change the variable name. It is used as a portlet preference variable name that users can override
+ *    the value of.
+ * 2) The value must be on the same line as the variable name and be terminated with a semicolon due to
+ *    regex searches by skin manager.
+ */
+$color3: #005aa9; // light muted blue
+$color3-light: lighten($color3, 15%);
+$color3-dark: darken($color3, 15%);
+
+/*
+ * Footer text color with 1 lighter shade.
+ *
+ * The variable color4 is used by the DynamicRespondrSkin portlet.
+ * 1) Do not change the variable name. It is used as a portlet preference variable name that users can override
+ *    the value of.
+ * 2) The value must be on the same line as the variable name and be terminated with a semicolon due to
+ *    regex searches by skin manager.
+ */
+$color4: #adadad; // light gray
+$color4-light: lighten($color4, 15%);
+$color4-lighter: lighten($color4, 30%);
+
+/*
+ * Footer background color.
+ *
+ * The variable color5 is used by the DynamicRespondrSkin portlet.
+ * 1) Do not change the variable name. It is used as a portlet preference variable name that users can override
+ *    the value of.
+ * 2) The value must be on the same line as the variable name and be terminated with a semicolon due to
+ *    regex searches by skin manager.
+ */
+$color5: #333333; // dark gray
+
+/*
+ * Portlet border color.
+ *
+ * The variable color6 is used by the DynamicRespondrSkin portlet.
+ * 1) Do not change the variable name. It is used as a portlet preference variable name that users can override
+ *    the value of.
+ * 2) The value must be on the same line as the variable name and be terminated with a semicolon due to
+ *    regex searches by skin manager.
+ */
+$color6: #e5e5e5; // lighter gray
+
+$border: 1px solid $grayscale2;
+
+/**
+ * Link colors
+ */
+$portal-link-color: $color3;
+$portal-link-hover-color: $color3-dark;
+
+/**
+ * Off-canvas content Styles
+ */
+$offcanvas-background-color: $grayscale10;
+
+/**
+ * Main content Styles
+ */
+$content-background-color: $white;
+
+/**
+ * Region styles
+ */
+$header-background-color: $color1;
+$header-text-color: $white;
+$header-link-color: $white;
+
+$footer-background-color: $color5;
+$footer-secondary-background-color: lighten($color5, 10%);
+$footer-text-color: $color4-light;
+$footer-link-color: $color4-lighter;
+$footer-link-hover-color: $white;
+
+/**
+ * Page-level styles
+ */
+$body-background-color: $footer-secondary-background-color; // default to match footer-second;  prevents 'gaps' at the bottom of short pages
+$body-background-image: none;
+$portal-page-body-background-image: url("./common/images/furley_bg.png"); // Using the furley pattern from http://subtlepatterns.com
+$portal-page-body-background-image-filter: none; // for full list of filter effects see: https://developer.mozilla.org/en-US/docs/Web/CSS/filter
+
+/**
+ * User bar styles
+ */
+$portal-global-background-color: $color1;
+$portal-global-background-gradient: false;
+$portal-global-border-color: $color1-light;
+
+/**
+ * Theme based button styles
+ */
+$btn-skin-text-color: $white;
+$btn-skin-background-color: $color2;
+
+$btn-skin-alt-text-color: $grayscale10;
+$btn-skin-alt-background-color: $color3;
+
+/**
+ * Nav
+ */
+$mobile-navbar-top-position: -148px; /* Active only on mobile : if you need to custumize region header height (big banner, small logo etc.), you need to modify this value. default is -148px. */
+
+$mobile-navbar-item-active-background-color: $color1;
+$mobile-navbar-item-active-text-color: $white;
+$mobile-navbar-item-background-color: $offcanvas-background-color;
+$mobile-navbar-flyout-item-active-hover-text-color: $white;
+
+$navbar-background-color: $color1-dark;
+$navbar-border-color: transparent;
+$navbar-border-size: 0;
+
+$navbar-item-background-color: transparent;
+$navbar-item-text-color: $grayscale3;
+
+$navbar-item-font-weight: bold;
+
+$navbar-item-hover-text-color: lighten($navbar-item-text-color, 50%);
+$navbar-item-hover-background-color: $color1-light;
+
+$navbar-item-active-background-color: $color1-darker;
+$navbar-item-active-hover-background-color: lighten(
+  $navbar-item-active-background-color,
+  50%
+);
+
+$navbar-item-active-text-color: $white;
+$navbar-item-active-hover-text-color: inherit;
+
+$navbar-controls-color: $white;
+$navbar-controls-hover-color: $white;
+
+$menu-toggle-background-color: $color1-dark;
+$menu-toggle-border-color: $color1-darker;
+$menu-toggle-text-color: $white;
+
+$menu-toggle-hover-background-color: $color1-light;
+$menu-toggle-hover-border-color: $color1-lighter;
+$menu-toggle-hover-text-color: $white;
+
+/**
+ * Tab Groups
+ */
+$tabgroup-background-color: $color2;
+
+$tabgroup-item-background-color: transparent;
+$tabgroup-item-text-color: $grayscale3;
+
+$tabgroup-item-hover-text-color: lighten($navbar-item-text-color, 50%);
+$tabgroup-item-hover-background-color: $color1-light;
+
+$tabgroup-item-active-background-color: $color1-darker;
+$tabgroup-item-active-text-color: $white;
+
+$tabgroup-item-active-hover-background-color: lighten(
+  $tabgroup-item-active-background-color,
+  50%
+);
+$tabgroup-item-active-hover-text-color: inherit;
+
+/**
+ * Search field
+ */
+$search-button-text-color: $white;
+$search-button-background-color: $color2;
+
+/**
+ * Portlet Chrome Settings
+ */
+$portlet-border-color: $color6;
+$portlet-border-radius: 5px;
+$portlet-header-border-color: $color6;
+
+$portlet-titlebar-link-color: $grayscale10;
+$portlet-titlebar-background-color: $grayscale2;
+
+$portlet-options-link-color: $grayscale10;
+$portlet-options-link-hover-color: darken($portlet-options-link-color, 20%);
+
+/**
+ * Detached Header (aka sticky header) styles
+ */
+$detached-header-link-color: $grayscale4;
+$detached-header-backbround-color: $color1;
+$detached-header-height: 30px;
+
+/*
+ * Custom Mixins Settings
+ */
+$contrasted-dark-default: $grayscale10;
+$contrasted-light-default: $grayscale2;
+$contrasted-lightness-threshold: 43%;
+
+/**
+ * Custom colors for rating component
+ */
+$rating-selected-color: gold;
+
+// Size for absolute width flex column
+$up-flex-constant-width: 20rem;
+
+// Bootstrap 5 accessibility classes (replacing bootstrap-accessibility plugin)
+.visually-hidden,
+.sr-only,
+.fl-offScreen-hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+.visually-hidden-focusable:not(:focus):not(:focus-within),
+.sr-only-focusable:not(:focus):not(:focus-within) {
+  @extend .visually-hidden;
+}
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/search.less b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/views.scss
similarity index 78%
rename from uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/search.less
rename to uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/views.scss
index 5253b79f43a..857a620a2f2 100644
--- a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/search.less
+++ b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/views.scss
@@ -17,20 +17,10 @@
  * under the License.
  */
 
-/* Search results portlet */
-.search-portlet {
-  .search-result {
-    h3,
-    a {
-      color: @portal-link-color !important;
-    }
-
-    .panel-footer {
-      font-size: 11px;
+/**
+ * View styles targeting a single specific view within uPortal
+ */
 
-      p {
-        margin: 0;
-      }
-    }
-  }
-}
+@import "views/activity";
+@import "views/googleAnalytics"; 
+@import "views/sitemap";
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/views/activity.less b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/views/_activity.scss
similarity index 99%
rename from uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/views/activity.less
rename to uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/views/_activity.scss
index 996cb8e5a0c..3ce85004028 100644
--- a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/views/activity.less
+++ b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/views/_activity.scss
@@ -60,4 +60,4 @@
   a:active {
     text-decoration: none;
   }
-}
+}
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/views/googleAnalytics.less b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/views/_googleAnalytics.scss
similarity index 88%
rename from uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/views/googleAnalytics.less
rename to uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/views/_googleAnalytics.scss
index 0b6b33e9040..57062d31b76 100644
--- a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/views/googleAnalytics.less
+++ b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/views/_googleAnalytics.scss
@@ -28,7 +28,7 @@
     cursor: pointer;
     width: 15px;
     height: 15px;
-    background: url(${renderRequest.contextPath}/media/skins/icons/destroy.png)
+    background: url("../../../icons/destroy.png")
       no-repeat;
 
     &:hover {
@@ -39,4 +39,4 @@
       float: right;
     }
   }
-}
+}
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/views/sitemap.less b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/views/_sitemap.scss
similarity index 99%
rename from uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/views/sitemap.less
rename to uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/views/_sitemap.scss
index 4fe885d373f..845ea113695 100644
--- a/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/views/sitemap.less
+++ b/uPortal-webapp/src/main/webapp/media/skins/respondr/common/scss/views/_sitemap.scss
@@ -15,4 +15,4 @@ section.sitemap {
       padding: 0;
     }
   }
-}
+}
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/respondr/defaultSkin.less b/uPortal-webapp/src/main/webapp/media/skins/respondr/defaultSkin.scss
similarity index 96%
rename from uPortal-webapp/src/main/webapp/media/skins/respondr/defaultSkin.less
rename to uPortal-webapp/src/main/webapp/media/skins/respondr/defaultSkin.scss
index 8b7e1abcb58..364e6f9a6bc 100644
--- a/uPortal-webapp/src/main/webapp/media/skins/respondr/defaultSkin.less
+++ b/uPortal-webapp/src/main/webapp/media/skins/respondr/defaultSkin.scss
@@ -22,4 +22,4 @@
  * @see docs/SKINNING_UPORTAL.md
  */
 
-@import "common/common.less";
+@import "common/scss/common";
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/media/skins/respondr/defaultSkin/skin.xml b/uPortal-webapp/src/main/webapp/media/skins/respondr/defaultSkin/skin.xml
index bb2a7393e10..76155af5196 100644
--- a/uPortal-webapp/src/main/webapp/media/skins/respondr/defaultSkin/skin.xml
+++ b/uPortal-webapp/src/main/webapp/media/skins/respondr/defaultSkin/skin.xml
@@ -28,15 +28,16 @@
   <css included="plain">/ResourceServingWebapp/rs/normalize/2.1.2/normalize-2.1.2.css</css>
   <css included="aggregated">/ResourceServingWebapp/rs/normalize/2.1.2/normalize-2.1.2.min.css</css>
 
+
+
   <css included="plain">/ResourceServingWebapp/rs/fontawesome/4.7.0/css/font-awesome.css</css>
   <css included="aggregated">/ResourceServingWebapp/rs/fontawesome/4.7.0/css/font-awesome.min.css</css>
 
-  <css included="plain" resource="true">/rs/bootstrap-plugins/accessibility/1.0.2/css/bootstrap-accessibility.css</css>
-  <css included="aggregated" resource="true">/rs/bootstrap-plugins/accessibility/1.0.2/css/bootstrap-accessibility.min.css</css>
+
 
   <!-- Default jQuery UI theme.  Point this to a custom jQuery UI theme if desired. -->
-  <css included="plain">/ResourceServingWebapp/rs/jqueryui/1.10.3/theme/smoothness/jquery-ui-1.10.3-smoothness.css</css>
-  <css included="aggregated">/ResourceServingWebapp/rs/jqueryui/1.10.3/theme/smoothness/jquery-ui-1.10.3-smoothness.min.css</css>
+  <css included="plain">/resource-server/rs/jqueryui/1.14.1/themes/smoothness/jquery-ui.css</css>
+  <css included="aggregated">/resource-server/rs/jqueryui/1.14.1/themes/smoothness/jquery-ui.min.css</css>
 
   <!--
    | The skin is applied in lieu of using the Dynamic Skin Portlet.  Follow configuration information in skinList.xml
@@ -49,5 +50,8 @@
   -->
 
   <js import="true">../common/common_skin.xml</js>
+  
+  <!-- Modern portlet list CSS fix -->
+  <css>../../common/css/modern-portlet-list.css</css>
 
 </resources>
diff --git a/uPortal-webapp/src/main/webapp/rs/conflict-resolution/js/resolve-conflicts.min.js b/uPortal-webapp/src/main/webapp/rs/conflict-resolution/js/resolve-conflicts.min.js
index 70d5c6e0a26..e2637833d64 100644
--- a/uPortal-webapp/src/main/webapp/rs/conflict-resolution/js/resolve-conflicts.min.js
+++ b/uPortal-webapp/src/main/webapp/rs/conflict-resolution/js/resolve-conflicts.min.js
@@ -16,4 +16,4 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-"use strict";var bootstrapTooltip=$.fn.tooltip.noConflict();$.fn.bootstrapTooltip=bootstrapTooltip
\ No newline at end of file
+"use strict";if($.fn.tooltip&&$.fn.tooltip.Constructor){$.fn.bootstrapTooltip=$.fn.tooltip;}
\ No newline at end of file
diff --git a/uPortal-webapp/src/main/webapp/scripts/portal-analytics.js b/uPortal-webapp/src/main/webapp/scripts/portal-analytics.js
index b0a2f4c6833..c784d16826f 100644
--- a/uPortal-webapp/src/main/webapp/scripts/portal-analytics.js
+++ b/uPortal-webapp/src/main/webapp/scripts/portal-analytics.js
@@ -94,5 +94,32 @@
         });
 
         addPageLevelListeners();
+        
+        // Bootstrap 5 dropdown compatibility fix
+        setTimeout(function() {
+            const dropdownToggles = document.querySelectorAll('.dropdown-toggle');
+            dropdownToggles.forEach(function(toggle, i) {
+                toggle.setAttribute('data-bs-toggle', 'dropdown');
+                toggle.setAttribute('aria-expanded', 'false');
+                
+                const menu = toggle.nextElementSibling || toggle.parentElement.querySelector('.dropdown-menu');
+                if (menu) {
+                    menu.setAttribute('aria-labelledby', toggle.id || 'dropdown-' + i);
+                    if (!toggle.id) toggle.id = 'dropdown-' + i;
+                }
+                
+                const existingInstance = bootstrap.Dropdown.getInstance(toggle);
+                if (existingInstance) existingInstance.dispose();
+                const instance = new bootstrap.Dropdown(toggle);
+                
+                // Add click handler to override conflicting JavaScript
+                toggle.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    instance.toggle();
+                }, true);
+            });
+
+        }, 100);
     });
 })();