diff --git a/control/content/index.html b/control/content/index.html
index a1cd4f4..82d3b9a 100755
--- a/control/content/index.html
+++ b/control/content/index.html
@@ -1,186 +1,237 @@
 ﻿<!DOCTYPE html>
 <html ng-app="webviewPlugin">
+
 <head lang="en">
-  <meta charset="UTF-8">
+  <meta charset="UTF-8" />
   <title>content</title>
   <!-- CSS -->
-  <link href="../../../../styles/helper.css" rel="stylesheet">
-  <link href="../../../../styles/siteIcons.css" rel="stylesheet">
+  <link href="../../../../styles/helper.css" rel="stylesheet" />
+  <link href="../../../../styles/siteIcons.css" rel="stylesheet" />
+  <link href="./style.css" rel="stylesheet" />
 
   <!-- JS -->
   <script src="../../../../scripts/buildfire.js"></script>
   <script src="../../../../scripts/angular/angular.min.js"></script>
 </head>
-<body ng-controller="webviewPluginCtrl" id="webviewApp" ng-cloak
-      ng-show="datastoreInitialized">
-<div ng-form="frmMain">
 
-  <div class="item clearfix row margin-bottom-fifteen">
-    <div class="labels col-md-3 padding-right-zero pull-left">
-      <span>URL to your PDF</span>
-    </div>
-    <div class="main col-md-9 pull-right clearfix">
-      <div class="col-md-9 pull-left padding-left-zero">
-        <input id="url" name="url" type="url" class="form-control"
-               ng-model="data.content.url"
-               required>
+<body ng-controller="webviewPluginCtrl" id="webviewApp" ng-cloak ng-show="datastoreInitialized">
+  <div ng-form="frmMain">
+    <div class="item clearfix row margin-bottom-fifteen">
+      <div class="labels col-md-3 padding-right-zero pull-left">
+        <span>URL to your PDF</span>
       </div>
-      <div class="col-md-3 pull-right padding-zero">
-        <button class="btn btn-success stretch" ng-click="validateUrl()"
-                ng-disabled="!data.content.url">
-          Validate
-        </button>
+      <div class="main col-md-9 pull-right clearfix">
+        <div class="col-md-9 pull-left padding-left-zero">
+          <input id="url" name="url" type="url" class="form-control" ng-model="data.content.url" required />
+        </div>
+        <div class="col-md-3 pull-right padding-zero">
+          <button class="btn btn-success stretch" ng-click="validateUrl()" ng-disabled="!data.content.url">
+            Validate
+          </button>
+        </div>
       </div>
     </div>
-  </div>
-  <br>
+    <br />
 
-  <div class="item clearfix row">
-    <div class="main pull-right col-md-9">
-      <div class="alert alert-success alert-sm text-center" ng-if="urlValid">Url
-        successfully validated
+    <div ng-if="urlValid || urlInValid" class="item clearfix row">
+      <div ng-if="urlValid" class="main pull-right col-md-9">
+        <div class="alert alert-success alert-sm text-center">
+          Url successfully validated
+        </div>
       </div>
-      <div class="alert alert-danger alert-sm text-center" ng-if="urlInValid">
-        Invalid Url
+      <div ng-if="urlInValid" class="main pull-right col-md-9">
+        <div class="alert alert-danger alert-sm text-center">Invalid Url</div>
       </div>
     </div>
-  </div>
-  <hr class="none">
-  <div class="item clearfix row">
-    <div class="col-md-9 pull-right">
-      <div class="checkbox checkbox-primary margin-top-zero">
-        <input id="checkboxid" type="checkbox"
-               ng-checked="data.content.openInApp"
-               ng-model="data.content.openInApp"
-               ng-change="openMethodChanged()">
-        <label for="checkboxid">Open URL in the app </label>
-      </div>
 
+    <div class="item clearfix row">
+      <div class="col-md-12">
+        <div class="checkbox checkbox-primary margin-top-zero">
+          <input id="checkboxid" type="checkbox" ng-checked="data.content.openInApp" ng-model="data.content.openInApp"
+            ng-change="openMethodChanged()" />
+          <label for="checkboxid">Open URL in the app </label>
+        </div>
+      </div>
+    </div>
+    <div class="item clearfix row">
+      <div class="note">
+        <strong>Important:</strong>
+        <p>
+          The file must be publicly accessible (anyone with the link can view
+          it without signing in).
+        </p>
+        <p>
+          If you are using Dropbox, update your shared link to include raw=1
+          (for example: https://www.dropbox.com/.../file.pdf?raw=1).
+        </p>
+        <p class="margin-bottom-zero">This ensures the app can load the PDF correctly.</p>
+      </div>
     </div>
   </div>
-</div>
-
-<script>
-  var webviewPluginApp = angular.module('webviewPlugin', []);
-
-  webviewPluginApp.controller("webviewPluginCtrl", ["$scope", "$log", "$timeout", function ($scope, $log, $timeout) {
-    var dataChanged = false;
-    $scope.datastoreInitialized = false;
-    $scope.urlValid = false;
-    $scope.urlInValid = false;
-    /*
-     * Go pull any previously saved data
-     * */
-    buildfire.datastore.get(function (err, result) {
-      if (!err) {
-        $scope.datastoreInitialized = true;
-      } else {
-        console.error("Error: ", err);
-        return;
-      }
-
-      if (result && result.data && !angular.equals({}, result.data) && result.id) {
-        $scope.data = result.data;
-        $scope.id = result.id;
-      } else {
-        $scope.data = {
-          content: {
-            url: "https://www.polyu.edu.hk/iaee/files/pdf-sample.pdf",
-            openInApp: true
-          }
-        };
-      }
-
-      /*
-       * watch for changes in data
-       * */
-      $scope.$watch('data', function (newObj, oldObj) {
-        if (angular.equals(newObj, oldObj) || newObj == undefined) {
-          dataChanged = false;
-        } else {
-          dataChanged = true;
-        }
-        if (dataChanged && newObj.content && !newObj.content.url) {
-          $scope.clearUrl();
-        }
-      }, true);
-
-      if (!$scope.$$phase && !$scope.$root.$$phase) {
-        $scope.$apply();
-      }
-    });
-
-    $scope.saveData = function () {
-      if (!$scope.datastoreInitialized) {
-        console.error("Error with datastore didn't get called");
-        return;
-      }
-
-      if (!dataChanged) {
-        console.warn("data didn't changed");
-        return;
-      }
-      var data = $scope.data;
-      // if the form has some invalid data do not save, in our case the user eneter invalid URL
-      if ($scope.frmMain.$invalid) {
-        $log.warn('invalid data, details will not be saved');
+
+  <script>
+    var webviewPluginApp = angular.module("webviewPlugin", []);
+
+    webviewPluginApp.controller("webviewPluginCtrl", ["$scope", "$log", "$timeout",
+      function ($scope, $log, $timeout) {
+        var dataChanged = false;
+        $scope.datastoreInitialized = false;
         $scope.urlValid = false;
-        $scope.urlInValid = true;
-        $timeout(function () {
-          $scope.urlInValid = false;
-        }, 3000);
-      } else {
-        $scope.urlValid = true;
         $scope.urlInValid = false;
-        $timeout(function () {
-          $scope.urlValid = false;
-        }, 3000);
-        dataChanged = false;
-        if (!/^https?\:\/\//.test(data.content.url)) {
-          data.content.url = "http://" + data.content.url;
-        }
+        /*
+         * Go pull any previously saved data
+         * */
+        buildfire.datastore.get(function (err, result) {
+          if (!err) {
+            $scope.datastoreInitialized = true;
+          } else {
+            console.error("Error: ", err);
+            return;
+          }
 
-        buildfire.datastore.save(data, function (err, result) {
-          if (err || !result) {
-            $log.error('Error saving the widget details: ', err);
+          if (
+            result &&
+            result.data &&
+            !angular.equals({}, result.data) &&
+            result.id
+          ) {
+            $scope.data = result.data;
+            $scope.id = result.id;
+          } else {
+            $scope.data = {
+              content: {
+                url: "https://www.polyu.edu.hk/iaee/files/pdf-sample.pdf",
+                openInApp: true,
+              },
+            };
           }
-          else {
-            $log.info('Widget details saved');
+
+          /*
+           * watch for changes in data
+           * */
+          $scope.$watch(
+            "data",
+            function (newObj, oldObj) {
+              if (angular.equals(newObj, oldObj) || newObj == undefined) {
+                dataChanged = false;
+              } else {
+                dataChanged = true;
+              }
+              if (dataChanged && newObj.content && !newObj.content.url) {
+                $scope.clearUrl();
+              }
+            },
+            true,
+          );
+
+          if (!$scope.$$phase && !$scope.$root.$$phase) {
+            $scope.$apply();
           }
         });
-      }
-    };
-
-    $scope.validateUrl = function () {
-      $scope.saveData();
-    };
-
-    $scope.clearUrl = function () {
-      $scope.data.content.url = undefined;
-      var data = $scope.data;
-      buildfire.datastore.save(data, function (err, result) {
-        if (err || !result) {
-          $log.error('Error saving the widget details: ', err);
-        }
-        else {
-          $log.info('Widget details saved');
-        }
-      });
-    };
-
-    $scope.openMethodChanged = function () {
-      dataChanged = true;
-      buildfire.datastore.save($scope.data, function (err, result) {
-        if (err || !result) {
-          $log.error('Error saving the widget details: ', err);
-        }
-        else {
-          $log.info('Widget details saved');
+
+        $scope.saveData = function () {
+          if (!$scope.datastoreInitialized) {
+            console.error("Error with datastore didn't get called");
+            return;
+          }
+
+          if (!dataChanged) {
+            console.warn("data didn't changed");
+            return;
+          }
+          var data = $scope.data;
+          // if the form has some invalid data do not save, in our case the user eneter invalid URL
+          if ($scope.frmMain.$invalid) {
+            $log.warn("invalid data, details will not be saved");
+            $scope.urlValid = false;
+            $scope.urlInValid = true;
+            $timeout(function () {
+              $scope.urlInValid = false;
+            }, 3000);
+          } else {
+            $scope.urlValid = true;
+            $scope.urlInValid = false;
+            $timeout(function () {
+              $scope.urlValid = false;
+            }, 3000);
+            dataChanged = false;
+            if (!/^https?\:\/\//.test(data.content.url)) {
+              data.content.url = "http://" + data.content.url;
+            }
+
+            buildfire.datastore.save(data, function (err, result) {
+              if (err || !result) {
+                $log.error("Error saving the widget details: ", err);
+              } else {
+                $log.info("Widget details saved");
+              }
+            });
+          }
+        };
+
+        function normalizePdfUrl(inputUrl) {
+          try {
+            if (!inputUrl || typeof inputUrl !== "string") {
+              return inputUrl;
+            }
+
+            const url = new URL(inputUrl);
+
+            // Check if it's a Dropbox link
+            const isDropbox =
+              url.hostname === "dropbox.com" ||
+              url.hostname === "www.dropbox.com";
+
+            if (!isDropbox) {
+              return inputUrl;
+            }
+
+            // Remove dl parameter if present
+            if (url.searchParams.has("dl")) {
+              url.searchParams.delete("dl");
+            }
+
+            // Ensure raw=1 exists
+            if (url.searchParams.get("raw") !== "1") {
+              url.searchParams.set("raw", "1");
+            }
+
+            return url.toString();
+          } catch (e) {
+            return inputUrl;
+          }
         }
-      });
-    }
-  }]);
-</script>
+
+        $scope.validateUrl = function () {
+          $scope.data.content.url = normalizePdfUrl($scope.data.content.url);
+          $scope.saveData();
+        };
+
+        $scope.clearUrl = function () {
+          $scope.data.content.url = undefined;
+          var data = $scope.data;
+          buildfire.datastore.save(data, function (err, result) {
+            if (err || !result) {
+              $log.error("Error saving the widget details: ", err);
+            } else {
+              $log.info("Widget details saved");
+            }
+          });
+        };
+
+        $scope.openMethodChanged = function () {
+          dataChanged = true;
+          buildfire.datastore.save($scope.data, function (err, result) {
+            if (err || !result) {
+              $log.error("Error saving the widget details: ", err);
+            } else {
+              $log.info("Widget details saved");
+            }
+          });
+        };
+      },
+    ]);
+  </script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/control/content/style.css b/control/content/style.css
new file mode 100644
index 0000000..8660d36
--- /dev/null
+++ b/control/content/style.css
@@ -0,0 +1,6 @@
+.note {
+    padding: 12px 35px;
+    margin-top: 15px;
+    margin-bottom: 15px;
+    background: #F5F5F5;
+}
\ No newline at end of file
