diff --git a/front_end_portserver/src/stories/loginPage/Title.css b/front_end_portserver/src/stories/loginPage/Title.css
new file mode 100644
index 0000000..e69de29
diff --git a/front_end_portserver/src/stories/loginPage/Title.stories.tsx b/front_end_portserver/src/stories/loginPage/Title.stories.tsx
new file mode 100644
index 0000000..99d900b
--- /dev/null
+++ b/front_end_portserver/src/stories/loginPage/Title.stories.tsx
@@ -0,0 +1,47 @@
+import { Meta, StoryObj } from "@storybook/react";
+import {Title} from "./Title";
+
+const meta= {
+    title: 'Title',
+    component: Title,
+    // tags: ['autodocs'],
+
+    argTypes: {
+        value: { control: 'text' }, // Ini untuk mengubah prop value
+        className: { control: 'text' }, // Ini untuk mengubah prop className
+        fontSize: { control: 'text'},
+    },
+
+}satisfies Meta<typeof Title>
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const CustomTitle: Story = {
+    args:{
+        value       : 'Custom Title',
+        className   : 'title-4xl',
+        fontSize    : "text-xl"
+    },
+};
+
+export const CustomTitles: Story = (args: { value: string; className: string | undefined; }) =>(
+    <Title 
+        value={args.value}
+        className={args.className}
+    />
+)
+
+CustomTitles.args = {
+    value: 'Port Server',
+    className: 'text-primary-text text-2xl font-bold',
+}
+
+
+export const SubTitle: Story = {
+    args:{
+        value       : 'Welcome back! Enter your account details',
+        className   : 'text-xl text-gray-900'
+    },
+};
diff --git a/front_end_portserver/src/stories/loginPage/Title.tsx b/front_end_portserver/src/stories/loginPage/Title.tsx
new file mode 100644
index 0000000..f1c61f9
--- /dev/null
+++ b/front_end_portserver/src/stories/loginPage/Title.tsx
@@ -0,0 +1,28 @@
+import { Label } from "@/components/ui/label"
+import '../../../app/global.css';
+
+interface TitleProps {
+
+    value       :   string;
+    value2      ?:   string;
+    className   ?:  string;
+    fontSize    ?:  string;
+}
+
+export const Title = ({
+    value,
+    value2,
+    className,
+    fontSize, 
+    ...props
+
+}: TitleProps ) => {
+    return (
+        <div>
+            <Label className={className} style={{fontSize}} {...props}>{value}</Label>
+            <Label >{value2}</Label>
+            <div className="text-4xl font-black text-gray-900 dark:text-white">Halo Apa kabar semuanya</div>
+        </div>
+        
+    ) 
+}