diff --git a/backend/db/db_query.py b/backend/db/db_query.py
index 912fe98..935089b 100644
--- a/backend/db/db_query.py
+++ b/backend/db/db_query.py
@@ -83,7 +83,11 @@ def get_code_by_data_id(data_id: int):
   Returns:
     Code: The code object
   """
-  return db.session.query(Code).join(Data, Data.code_id == Code.id).filter(Data.id == data_id).first()
+  return db.session.query(
+      Data.check_type,
+      Data.permalink,
+      Code.code
+    ).join(Data, Data.code_id == Code.id).filter(Data.id == data_id).first()
 
 
 def search_by_query(query, user_id: int = None):
diff --git a/backend/routes/playground.py b/backend/routes/playground.py
index fd7054e..294f84c 100644
--- a/backend/routes/playground.py
+++ b/backend/routes/playground.py
@@ -249,7 +249,7 @@ def get_code_by_id(data_id: int):
   
   data = get_code_by_data_id(data_id)
   if data:
-    return jsonify({'result': 'success', 'code': data.code})
+    return jsonify({'result': 'success', 'code': data.code, 'check': data.check_type, 'permalink': data.permalink})
   
   return jsonify({'result': 'fail', 'message': 'There is a problem. Please try after some time.'}, 500)
 
diff --git a/frontend/src/api/playgroundApi.js b/frontend/src/api/playgroundApi.js
index 23869b4..1758324 100644
--- a/frontend/src/api/playgroundApi.js
+++ b/frontend/src/api/playgroundApi.js
@@ -44,7 +44,7 @@ export async function getCodeByParmalink(check, permalink) {
 /**
  * Return code by id
  * @param {*} id data item id
- * @returns 
+ * @returns {json} {code, check, permalink}
  */
 export async function getCodeById(id) {
   let url = `${API_URL}/code/${id}`;
diff --git a/frontend/src/components/Utils/DrawerComponent.jsx b/frontend/src/components/Utils/DrawerComponent.jsx
index 268d1a0..b27ab04 100644
--- a/frontend/src/components/Utils/DrawerComponent.jsx
+++ b/frontend/src/components/Utils/DrawerComponent.jsx
@@ -136,6 +136,7 @@ const DrawerComponent = ({ isOpen, onClose, onItemSelect }) => {
    * it will fetch the item content from the API and call the callback function
    * with the code.
    * @param {number} itemId - The item id (Data table id)
+   * @param {string} permalink - The item permalink (Data table permalink)
    * @param {string} check - The check name (Check type: Limboole, NuXmv, etc.)
    * @returns {void}
    * @todo Add error handling
@@ -145,7 +146,7 @@ const DrawerComponent = ({ isOpen, onClose, onItemSelect }) => {
       await getCodeById(itemId)
         .then((res) => {
           const itemContent = res;
-          onItemSelect(check, itemContent.code);
+          onItemSelect(itemContent.check, itemContent.permalink, itemContent.code);
           setDebouncedSearchQuery('');
           onClose();
         })
diff --git a/frontend/src/components/Utils/Nav.jsx b/frontend/src/components/Utils/Nav.jsx
index b642b59..396cc73 100644
--- a/frontend/src/components/Utils/Nav.jsx
+++ b/frontend/src/components/Utils/Nav.jsx
@@ -113,9 +113,10 @@ export default function Navbar({ setEditorValue, setLanguage }) {
    * @param {*} check 
    * @param {*} code 
    */
-  const handleDrawerItemClick = (check, code) => {
+  const handleDrawerItemClick = (check, permalink, code) => {
     setEditorValue(code);
     setLanguage(Options.find(option => option.short === check));
+    window.history.pushState(null, null, `/?check=${check}&p=${permalink}`);
     // Clean the output area when a new item is loaded from the history. 
     // FIXME: Better approach would be to handle this using useState hook in the Output component.
     //But limboole is setting the output from web-assembly. We need to handle this when we refactor the code for Alloy.