diff --git a/package-lock.json b/package-lock.json
index d8ce6c1524ce8d554ecd2d07705f0d6488e643de..b4a65b9930ade69d412817e18a7b4e4579022ed5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,8 @@
       },
       "devDependencies": {
         "@heroicons/react": "^2.0.18",
+        "axios": "^1.6.2",
+        "react-jwt": "^1.2.0",
         "react-router-dom": "^6.18.0",
         "tailwindcss": "^3.3.5"
       }
@@ -5085,6 +5087,31 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.2.tgz",
+      "integrity": "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==",
+      "dev": true,
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dev": true,
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
@@ -14203,6 +14230,12 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "dev": true
+    },
     "node_modules/psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
@@ -14491,6 +14524,21 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-jwt": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/react-jwt/-/react-jwt-1.2.0.tgz",
+      "integrity": "sha512-HmEaS63CaqxHPIWoLh68KpGacXX7tAiWS2YIREVDosc2m4hTYoMp23Oz1lRM3MivT8DGibwTFIg5k4HNLfMv1w==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "optionalDependencies": {
+        "fsevents": "^2.3.2"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
diff --git a/package.json b/package.json
index f011945d58a144a13a24b069724d804e4ce75a7c..ba79822f0b93a3f207a755015737f86175ddff3a 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,8 @@
   },
   "devDependencies": {
     "@heroicons/react": "^2.0.18",
+    "axios": "^1.6.2",
+    "react-jwt": "^1.2.0",
     "react-router-dom": "^6.18.0",
     "tailwindcss": "^3.3.5"
   }
diff --git a/src/components/NavigationBar/index.tsx b/src/components/NavigationBar/index.tsx
index 80fdc9b2902d9c8eb7144466ccbbfe3b60929c8b..54002a4fcfa48880c7300e82a8c5157c6b2e19f4 100644
--- a/src/components/NavigationBar/index.tsx
+++ b/src/components/NavigationBar/index.tsx
@@ -31,29 +31,29 @@ const NavigationBar = () => {
                 <div className="sm:grow max-w-sm bg-black/10 rounded-full text-center ml-auto sm:mx-auto btn-primary">
                     <div className="text-white gap-1 flex">
                         <MagnifyingGlassIcon className="text-inherit inline h-6 w-6"/>
-                        <input className="placeholder:italic bg-transparent placeholder:text-inherit text-inherit inline grow" placeholder="Search..">
+                        <input className="placeholder:italic bg-transparent placeholder:text-inherit inline grow" placeholder="Search..">
                         </input>
                     </div>
                 </div>
                 <div className="sm:ml-auto btn-primary text-tertiary">
                     <a>
                         <BookOpenIcon className="h-6 w-6 inline"/>
-                        <p className="text-inherit hidden md:inline">Catalog</p>
+                        <p className="text-inherit hidden min-[784px]:inline">Catalog</p>
                     </a>
                 </div>
                 <div className="btn-primary text-tertiary">
                     <a>           
                         <ShoppingCartIcon className="h-6 w-6 inline"/>
-                        <p className="text-inherit hidden md:inline">Cart</p>    
+                        <p className="text-inherit hidden min-[784px]:inline">Cart</p>    
                     </a>
                 </div>
                 <div className="btn-primary text-tertiary">
                     <button>
                         <UserIcon className="h-6 w-6 inline"/>
-                        <p className="text-inherit hidden md:inline">Account</p>
+                        <p className="text-inherit hidden min-[784px]:inline">Account</p>
                     </button>
                 </div>
-                <div className="bg-secondary btn-primary text-tertiary rounded px-4 hover:bg-quinary">
+                <div className="bg-secondary btn-primary text-tertiary rounded px-4 hover:bg-quinary truncate">
                     <a href="/login">
                         <p className="text-inherit inline">Log In</p>
                     </a>