diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js
index 7af3ad80a39..e391927d853 100644
--- a/app/assets/javascripts/lib/utils/common_utils.js
+++ b/app/assets/javascripts/lib/utils/common_utils.js
@@ -4,8 +4,8 @@
 
 import { GlBreakpointInstance as breakpointInstance } from '@gitlab/ui/dist/utils';
 import $ from 'jquery';
-import Cookies from 'js-cookie';
 import { isFunction, defer } from 'lodash';
+import Cookies from '~/lib/utils/cookies';
 import { SCOPED_LABEL_DELIMITER } from '~/vue_shared/components/sidebar/labels_select_widget/constants';
 import { convertToCamelCase, convertToSnakeCase } from './text_utility';
 import { isObject } from './type_utility';
diff --git a/app/assets/javascripts/lib/utils/cookies.js b/app/assets/javascripts/lib/utils/cookies.js
new file mode 100644
index 00000000000..be0491376c9
--- /dev/null
+++ b/app/assets/javascripts/lib/utils/cookies.js
@@ -0,0 +1,8 @@
+import CookiesBuilder from 'js-cookie';
+
+// set default path for cookies
+const Cookies = CookiesBuilder.withAttributes({
+  path: gon.relative_url_root || '/',
+});
+
+export default Cookies;
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 8fc54be9c28..4101b520e80 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -1,7 +1,6 @@
 /* global $ */
 
 import jQuery from 'jquery';
-import Cookies from 'js-cookie';
 
 // bootstrap webpack, common libs, polyfills, and behaviors
 import './webpack';
@@ -178,9 +177,6 @@ initUserTracking();
 initLayoutNav();
 initAlertHandler();
 
-// Set the default path for all cookies to GitLab's root directory
-Cookies.defaults.path = gon.relative_url_root || '/';
-
 // `hashchange` is not triggered when link target is already in window.location
 $body.on('click', 'a[href^="#"]', function clickHashLinkCallback() {
   const href = this.getAttribute('href');
diff --git a/app/assets/javascripts/work_items_hierarchy/components/app.vue b/app/assets/javascripts/work_items_hierarchy/components/app.vue
index 621cfe5bace..779bd27516a 100644
--- a/app/assets/javascripts/work_items_hierarchy/components/app.vue
+++ b/app/assets/javascripts/work_items_hierarchy/components/app.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlBanner } from '@gitlab/ui';
-import Cookies from 'js-cookie';
+import Cookies from '~/lib/utils/cookies';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import RESPONSE from '../static_response';
 import { WORK_ITEMS_SURVEY_COOKIE_NAME, workItemTypes } from '../constants';
diff --git a/package.json b/package.json
index 21945c6799d..90c4767fc86 100644
--- a/package.json
+++ b/package.json
@@ -136,7 +136,7 @@
     "jed": "^1.1.1",
     "jquery": "^3.6.0",
     "jquery.caret": "^0.3.1",
-    "js-cookie": "^2.2.1",
+    "js-cookie": "^3.0.0",
     "js-yaml": "^3.13.1",
     "jszip": "^3.1.3",
     "jszip-utils": "^0.0.2",
diff --git a/spec/frontend/awards_handler_spec.js b/spec/frontend/awards_handler_spec.js
index b588a27b028..5d657745615 100644
--- a/spec/frontend/awards_handler_spec.js
+++ b/spec/frontend/awards_handler_spec.js
@@ -1,5 +1,5 @@
 import $ from 'jquery';
-import Cookies from 'js-cookie';
+import Cookies from '~/lib/utils/cookies';
 import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
 import { initEmojiMock, clearEmojiMock } from 'helpers/emoji';
 import { useFakeRequestAnimationFrame } from 'helpers/fake_request_animation_frame';
diff --git a/spec/frontend/blob/pipeline_tour_success_modal_spec.js b/spec/frontend/blob/pipeline_tour_success_modal_spec.js
index f4af57de41f..750dd8f0a72 100644
--- a/spec/frontend/blob/pipeline_tour_success_modal_spec.js
+++ b/spec/frontend/blob/pipeline_tour_success_modal_spec.js
@@ -1,6 +1,6 @@
 import { GlSprintf, GlModal, GlLink } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Cookies from 'js-cookie';
+import Cookies from '~/lib/utils/cookies';
 import { stubComponent } from 'helpers/stub_component';
 import { mockTracking, triggerEvent, unmockTracking } from 'helpers/tracking_helper';
 import pipelineTourSuccess from '~/blob/pipeline_tour_success_modal.vue';
diff --git a/spec/frontend/broadcast_notification_spec.js b/spec/frontend/broadcast_notification_spec.js
index cfb9fffffc3..5b9541dedfb 100644
--- a/spec/frontend/broadcast_notification_spec.js
+++ b/spec/frontend/broadcast_notification_spec.js
@@ -1,4 +1,4 @@
-import Cookies from 'js-cookie';
+import Cookies from '~/lib/utils/cookies';
 import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
 import initBroadcastNotifications from '~/broadcast_notification';
 
diff --git a/spec/frontend/design_management/components/design_sidebar_spec.js b/spec/frontend/design_management/components/design_sidebar_spec.js
index a818a86bef6..e8426216c1c 100644
--- a/spec/frontend/design_management/components/design_sidebar_spec.js
+++ b/spec/frontend/design_management/components/design_sidebar_spec.js
@@ -1,7 +1,7 @@
 import { GlCollapse, GlPopover } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Cookies from 'js-cookie';
 import { nextTick } from 'vue';
+import Cookies from '~/lib/utils/cookies';
 import DesignDiscussion from '~/design_management/components/design_notes/design_discussion.vue';
 import DesignNoteSignedOut from '~/design_management/components/design_notes/design_note_signed_out.vue';
 import DesignSidebar from '~/design_management/components/design_sidebar.vue';
diff --git a/spec/frontend/diffs/store/actions_spec.js b/spec/frontend/diffs/store/actions_spec.js
index 3b567fbc704..cc595e58dda 100644
--- a/spec/frontend/diffs/store/actions_spec.js
+++ b/spec/frontend/diffs/store/actions_spec.js
@@ -1,5 +1,5 @@
 import MockAdapter from 'axios-mock-adapter';
-import Cookies from 'js-cookie';
+import Cookies from '~/lib/utils/cookies';
 import { useLocalStorageSpy } from 'helpers/local_storage_helper';
 import { TEST_HOST } from 'helpers/test_constants';
 import testAction from 'helpers/vuex_action_helper';
diff --git a/spec/frontend/emoji/components/utils_spec.js b/spec/frontend/emoji/components/utils_spec.js
index 03eeb6b6bf7..56f514ee9a8 100644
--- a/spec/frontend/emoji/components/utils_spec.js
+++ b/spec/frontend/emoji/components/utils_spec.js
@@ -1,7 +1,7 @@
-import Cookies from 'js-cookie';
+import Cookies from '~/lib/utils/cookies';
 import { getFrequentlyUsedEmojis, addToFrequentlyUsed } from '~/emoji/components/utils';
 
-jest.mock('js-cookie');
+jest.mock('~/lib/utils/cookies');
 
 describe('getFrequentlyUsedEmojis', () => {
   it('it returns null when no saved emojis set', () => {
diff --git a/spec/frontend/groups/landing_spec.js b/spec/frontend/groups/landing_spec.js
index d60adea202b..2c2c19ee0c7 100644
--- a/spec/frontend/groups/landing_spec.js
+++ b/spec/frontend/groups/landing_spec.js
@@ -1,4 +1,4 @@
-import Cookies from 'js-cookie';
+import Cookies from '~/lib/utils/cookies';
 import Landing from '~/groups/landing';
 
 describe('Landing', () => {
diff --git a/spec/frontend/merge_conflicts/store/actions_spec.js b/spec/frontend/merge_conflicts/store/actions_spec.js
index 1b6a0f9e977..7cee6576b53 100644
--- a/spec/frontend/merge_conflicts/store/actions_spec.js
+++ b/spec/frontend/merge_conflicts/store/actions_spec.js
@@ -1,6 +1,6 @@
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
-import Cookies from 'js-cookie';
+import Cookies from '~/lib/utils/cookies';
 import { useMockLocationHelper } from 'helpers/mock_window_location_helper';
 import testAction from 'helpers/vuex_action_helper';
 import createFlash from '~/flash';
@@ -11,7 +11,7 @@ import { restoreFileLinesState, markLine, decorateFiles } from '~/merge_conflict
 
 jest.mock('~/flash.js');
 jest.mock('~/merge_conflicts/utils');
-jest.mock('js-cookie');
+jest.mock('~/lib/utils/cookies');
 
 describe('merge conflicts actions', () => {
   let mock;
diff --git a/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_spec.js b/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_spec.js
index 5f1aff99578..0f63c243342 100644
--- a/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_spec.js
+++ b/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_spec.js
@@ -1,6 +1,6 @@
 import { GlProgressBar, GlAlert } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
-import Cookies from 'js-cookie';
+import Cookies from '~/lib/utils/cookies';
 import LearnGitlab from '~/pages/projects/learn_gitlab/components/learn_gitlab.vue';
 import eventHub from '~/invite_members/event_hub';
 import { INVITE_MODAL_OPEN_COOKIE } from '~/pages/projects/learn_gitlab/constants';
diff --git a/spec/frontend/pages/projects/pipeline_schedules/shared/components/pipeline_schedule_callout_spec.js b/spec/frontend/pages/projects/pipeline_schedules/shared/components/pipeline_schedule_callout_spec.js
index c28a03b35d7..ca7f70f4434 100644
--- a/spec/frontend/pages/projects/pipeline_schedules/shared/components/pipeline_schedule_callout_spec.js
+++ b/spec/frontend/pages/projects/pipeline_schedules/shared/components/pipeline_schedule_callout_spec.js
@@ -1,7 +1,7 @@
 import { GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Cookies from 'js-cookie';
 import { nextTick } from 'vue';
+import Cookies from '~/lib/utils/cookies';
 import PipelineSchedulesCallout from '~/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue';
 
 const cookieKey = 'pipeline_schedules_callout_dismissed';
diff --git a/spec/frontend/vue_shared/issuable/sidebar/components/issuable_sidebar_root_spec.js b/spec/frontend/vue_shared/issuable/sidebar/components/issuable_sidebar_root_spec.js
index 5b4d8718bbc..6c9e5f85fa0 100644
--- a/spec/frontend/vue_shared/issuable/sidebar/components/issuable_sidebar_root_spec.js
+++ b/spec/frontend/vue_shared/issuable/sidebar/components/issuable_sidebar_root_spec.js
@@ -1,6 +1,6 @@
 import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
-import Cookies from 'js-cookie';
 import { nextTick } from 'vue';
+import Cookies from '~/lib/utils/cookies';
 import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 
diff --git a/yarn.lock b/yarn.lock
index 2d3a1a6e048..236523c3625 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7734,10 +7734,10 @@ js-beautify@^1.6.12:
     mkdirp "~1.0.3"
     nopt "^4.0.3"
 
-js-cookie@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
-  integrity sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==
+js-cookie@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.1.tgz#9e39b4c6c2f56563708d7d31f6f5f21873a92414"
+  integrity sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw==
 
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"