diff --git a/ui/components/institutional/jwt-dropdown/__snapshots__/jwt-dropdown.test.js.snap b/ui/components/institutional/jwt-dropdown/__snapshots__/jwt-dropdown.test.js.snap
new file mode 100644
index 000000000..2612ae47c
--- /dev/null
+++ b/ui/components/institutional/jwt-dropdown/__snapshots__/jwt-dropdown.test.js.snap
@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`JwtDropdown should render the Jwt dropdown component 1`] = `
+
+
+
+ [selectJWT]
+
+
+
+
+
+
+
+`;
diff --git a/ui/components/institutional/jwt-dropdown/index.js b/ui/components/institutional/jwt-dropdown/index.js
new file mode 100644
index 000000000..455c3c0ae
--- /dev/null
+++ b/ui/components/institutional/jwt-dropdown/index.js
@@ -0,0 +1 @@
+export { default } from './jwt-dropdown';
diff --git a/ui/components/institutional/jwt-dropdown/jwt-dropdown.js b/ui/components/institutional/jwt-dropdown/jwt-dropdown.js
new file mode 100644
index 000000000..fd1fc4f28
--- /dev/null
+++ b/ui/components/institutional/jwt-dropdown/jwt-dropdown.js
@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Dropdown from '../../ui/dropdown';
+import Box from '../../ui/box';
+import { Color } from '../../../helpers/constants/design-system';
+import { Text } from '../../component-library';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+
+const JwtDropdown = (props) => {
+ const t = useI18nContext();
+ const { currentJwt, jwtList } = props;
+
+ return (
+
+
+ {t('selectJWT')}
+
+ item === currentJwt)
+ ? []
+ : [
+ {
+ value: currentJwt,
+ name:
+ currentJwt.length > 9
+ ? `...${currentJwt.slice(-9)}`
+ : currentJwt,
+ },
+ ]),
+ ...jwtList.map((text) => {
+ return {
+ value: text,
+ name: `...${text?.slice(-9)}`,
+ };
+ }),
+ ]}
+ onChange={(opt) => props.onChange(opt.value)}
+ />
+
+ );
+};
+
+JwtDropdown.propTypes = {
+ jwtList: PropTypes.array,
+ currentJwt: PropTypes.string,
+ onChange: PropTypes.func,
+};
+
+export default JwtDropdown;
diff --git a/ui/components/institutional/jwt-dropdown/jwt-dropdown.scss b/ui/components/institutional/jwt-dropdown/jwt-dropdown.scss
new file mode 100644
index 000000000..61d04f3bb
--- /dev/null
+++ b/ui/components/institutional/jwt-dropdown/jwt-dropdown.scss
@@ -0,0 +1,10 @@
+.custody-search-jwt__select {
+ height: 54px;
+ width: 100%;
+ display: flex;
+ align-items: center;
+
+ &-title {
+ @include Paragraph;
+ }
+}
diff --git a/ui/components/institutional/jwt-dropdown/jwt-dropdown.stories.js b/ui/components/institutional/jwt-dropdown/jwt-dropdown.stories.js
new file mode 100644
index 000000000..e691dc602
--- /dev/null
+++ b/ui/components/institutional/jwt-dropdown/jwt-dropdown.stories.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import JwtDropdown from '.';
+
+export default {
+ title: 'Components/Institutional/JwtDropdown',
+ component: JwtDropdown,
+ args: {
+ jwtList: ['jwt1', 'jwt2'],
+ currentJwt: 'jwt1',
+ onChange: () => {
+ action('onChange');
+ },
+ },
+};
+
+export const DefaultStory = (args) => ;
+
+DefaultStory.storyName = 'JwtDropdown';
diff --git a/ui/components/institutional/jwt-dropdown/jwt-dropdown.test.js b/ui/components/institutional/jwt-dropdown/jwt-dropdown.test.js
new file mode 100644
index 000000000..58fdc2aa5
--- /dev/null
+++ b/ui/components/institutional/jwt-dropdown/jwt-dropdown.test.js
@@ -0,0 +1,23 @@
+import { render, fireEvent } from '@testing-library/react';
+import React from 'react';
+import sinon from 'sinon';
+import JwtDropdown from './jwt-dropdown';
+
+describe('JwtDropdown', () => {
+ it('should render the Jwt dropdown component', () => {
+ const props = {
+ jwtList: ['jwy1', 'jwt2'],
+ currentJwt: 'someToken',
+ onChange: sinon.spy(),
+ };
+
+ const { getByTestId, container } = render();
+
+ fireEvent.change(getByTestId('jwt-dropdown'), {
+ target: { value: 'jwt2' },
+ });
+
+ expect(getByTestId('jwt-dropdown')).toBeDefined();
+ expect(container).toMatchSnapshot();
+ });
+});