diff --git a/apps/frontend/src/assets/icons/vector.svg b/apps/frontend/src/assets/icons/vector.svg
new file mode 100644
index 0000000..912be4a
--- /dev/null
+++ b/apps/frontend/src/assets/icons/vector.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M9.69667 0.269508C9.40335 -0.0238179 8.92951 -0.0238179 8.63619 0.269508L4.95833 3.93984L1.28048 0.261986C0.987154 -0.0313392 0.51332 -0.0313392 0.219994 0.261986C-0.0733314 0.555312 -0.0733314 1.02915 0.219994 1.32247L3.89785 5.00033L0.219994 8.67818C-0.0733314 8.9715 -0.0733314 9.44534 0.219994 9.73866C0.51332 10.032 0.987154 10.032 1.28048 9.73866L4.95833 6.06081L8.63619 9.73866C8.92951 10.032 9.40335 10.032 9.69667 9.73866C9.99 9.44534 9.99 8.9715 9.69667 8.67818L6.01882 5.00033L9.69667 1.32247C9.98248 1.03667 9.98248 0.555312 9.69667 0.269508Z" fill="white"/>
+</svg>
diff --git a/apps/frontend/src/components/Tag/Tag.stories.ts b/apps/frontend/src/components/Tag/Tag.stories.ts
new file mode 100644
index 0000000..f10fd8e
--- /dev/null
+++ b/apps/frontend/src/components/Tag/Tag.stories.ts
@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Tag } from './Tag';
+
+const meta = {
+  title: 'Tag',
+  component: Tag,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Tag>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+
+export const Default: Story = {
+  args: {
+    label: 'intersteller collaboration',
+    isSelected: false
+  },
+};
+
+export const Selected: Story = {
+    args: {
+      label: 'scientific research',
+      isSelected: true
+    },
+  };
\ No newline at end of file
diff --git a/apps/frontend/src/components/Tag/Tag.tsx b/apps/frontend/src/components/Tag/Tag.tsx
new file mode 100644
index 0000000..0e078e6
--- /dev/null
+++ b/apps/frontend/src/components/Tag/Tag.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import vector from '../../assets/icons/vector.svg';
+
+interface TagProps {
+  label: string;
+  isSelected?: boolean;
+}
+
+export const Tag = ({ label, isSelected }: TagProps) => {
+    const [selected, setSelected] = React.useState<boolean>(isSelected || false);
+
+  const classes = 'rounded-[40px] font-gellix text-[20px] leading-5 p-[30px] '.concat(
+    selected === true ? 'flex bg-midnight-blue text-white' : 'text-midnight-blue border border-midnight-blue hover:bg-midnight-blue hover:text-white',
+  );
+
+  const handleClick = ()=> {
+    setSelected(!selected);
+  }
+
+  return (
+    <div className={classes} onClick={handleClick}>
+      {label}
+      {selected && <img className='pl-[18px]' src={vector} alt="logo" />}
+    </div>
+  );
+};