diff --git a/src/components/Button/Button.stories.ts b/src/components/Button/Button.stories.ts
new file mode 100644
index 0000000..dd9163b
--- /dev/null
+++ b/src/components/Button/Button.stories.ts
@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ButtonProps } from './Button.types'
+import { Button } from './Button'
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta: Meta<ButtonProps> = {
+    title: 'Example/Button',
+    component: Button,
+    tags: ['autodocs'],
+    argTypes: {
+        label: {
+            type: 'string',
+        },
+    },
+}
+
+export default meta
+type Story = StoryObj<ButtonProps>
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+export const Primary: Story = {
+    args: {
+        label: 'Button',
+    },
+}
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
new file mode 100644
index 0000000..54bb749
--- /dev/null
+++ b/src/components/Button/Button.tsx
@@ -0,0 +1,7 @@
+import * as S from './style'
+import { ButtonProps } from './Button.types'
+
+
+export const Button = ({label, ...props}:ButtonProps) => {
+    return <S.Button {...props}>{label}</S.Button>
+}
diff --git a/src/components/Button/Button.types.ts b/src/components/Button/Button.types.ts
new file mode 100644
index 0000000..7424881
--- /dev/null
+++ b/src/components/Button/Button.types.ts
@@ -0,0 +1,4 @@
+import { ButtonHTMLAttributes } from "react";
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    label: string
+} 
\ No newline at end of file
diff --git a/src/components/Button/style.ts b/src/components/Button/style.ts
new file mode 100644
index 0000000..9a848cb
--- /dev/null
+++ b/src/components/Button/style.ts
@@ -0,0 +1,19 @@
+import styled from 'styled-components'
+
+export const Button = styled.button`
+    font-size: 16px;
+    color: #DEB4FF;
+    width: 121px;
+    height: 35px;
+    border: 1px solid #DEB4FF;
+    background: none;
+    border-radius: 3px;
+
+    &:hover {
+        background-color: #DEB4FF;
+        color: #161217;
+    }
+    
+`
+
+
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index f7fca58..f1b532a 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,5 +1,7 @@
 import Head from 'next/head'
 import * as S from '../styles/pages/Home'
+import { Button } from 'src/components/Button/style'
+
 
 export default function Home() {
   return (
@@ -11,7 +13,9 @@ export default function Home() {
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <main>
+
         <S.Hero>Open  Start</S.Hero>
+        <Button>Login</Button>
       </main>
     </>
   )
diff --git a/src/styles/Globals.ts b/src/styles/Globals.ts
index 6096dc5..aebc4d9 100644
--- a/src/styles/Globals.ts
+++ b/src/styles/Globals.ts
@@ -1,13 +1,14 @@
 import { createGlobalStyle } from 'styled-components'
 
 const GlobalStyle = createGlobalStyle`
+  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap');
   html,
   body {
     padding: 0;
     margin: 0;
     background: black;
-    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-      Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+    
+    
   }
   a {
     color: inherit;
@@ -15,6 +16,7 @@ const GlobalStyle = createGlobalStyle`
   }
   * {
     box-sizing: border-box;
+    font-family: 'Inter', sans-serif;
   }
 `
 
diff --git a/tsconfig.json b/tsconfig.json
index 967ee69..98c0a17 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,32 +1,46 @@
 {
-    "compilerOptions": {
-        "target": "es5",
-        "lib": ["dom", "dom.iterable", "esnext"],
-        "allowJs": true,
-        "skipLibCheck": true,
-        "strict": true,
-        "forceConsistentCasingInFileNames": true,
-        "noEmit": true,
-        "esModuleInterop": true,
-        "module": "esnext",
-        "moduleResolution": "node",
-        "resolveJsonModule": true,
-        "isolatedModules": true,
-        "jsx": "react-jsx",
-        "baseUrl": ".",
-        "paths": {
-            "@components/*": ["components/*"],
-            "@utils/*": ["utils/*"],
-            "@lib/*": ["lib/*"],
-            "@services/*": ["services/*"]
-        },
-        "incremental": true
-    },
-    "include": [
-        "next-env.d.ts",
-        "**/*.ts",
-        "**/*.tsx",
-        "src/pages/_document.tss"
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
     ],
-    "exclude": ["node_modules"]
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "baseUrl": ".",
+    "paths": {
+      "@components/*": [
+        "components/*"
+      ],
+      "@utils/*": [
+        "utils/*"
+      ],
+      "@lib/*": [
+        "lib/*"
+      ],
+      "@services/*": [
+        "services/*"
+      ]
+    },
+    "incremental": true
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "src/pages/_document.tss"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }