diff --git a/package.json b/package.json
index d53576ab..46571a4c 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "@eslint/js": "^9.13.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/node": "^22.9.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f38b54dd..ef9f79da 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -33,6 +33,9 @@ importers:
       '@testing-library/react':
         specifier: ^16.0.1
         version: 16.0.1(@testing-library/dom@10.4.0)(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@testing-library/user-event':
+        specifier: ^14.5.2
+        version: 14.5.2(@testing-library/dom@10.4.0)
       '@types/node':
         specifier: ^22.9.0
         version: 22.9.0
@@ -612,6 +615,12 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@testing-library/user-event@14.5.2':
+    resolution: {integrity: sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==}
+    engines: {node: '>=12', npm: '>=6'}
+    peerDependencies:
+      '@testing-library/dom': '>=7.21.4'
+
   '@types/aria-query@5.0.4':
     resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
 
@@ -2374,6 +2383,10 @@ snapshots:
       '@types/react': 18.3.12
       '@types/react-dom': 18.3.1
 
+  '@testing-library/user-event@14.5.2(@testing-library/dom@10.4.0)':
+    dependencies:
+      '@testing-library/dom': 10.4.0
+
   '@types/aria-query@5.0.4': {}
 
   '@types/babel__core@7.20.5':
diff --git a/src/components/Dummy.test.tsx b/src/components/Dummy.test.tsx
deleted file mode 100644
index 330a24a3..00000000
--- a/src/components/Dummy.test.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import Dummy from './Dummy';
-
-describe('Component: Dummy', () => {
-  it('should render with dummy text', () => {
-    render(<Dummy />);
-    expect(screen.getByText('dummy')).toBeInTheDocument();
-  });
-});
diff --git a/src/components/Dummy.tsx b/src/components/Dummy.tsx
deleted file mode 100644
index 6d7a6416..00000000
--- a/src/components/Dummy.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-// This is a dummy component for the test setup
-const Dummy = () => {
-  return <div>dummy</div>;
-};
-
-export default Dummy;
diff --git a/src/components/FormContainer.tsx b/src/components/FormContainer.tsx
new file mode 100644
index 00000000..bd620675
--- /dev/null
+++ b/src/components/FormContainer.tsx
@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+
+const FormContainer = ({ children }: { children: ReactNode }) => {
+    return (
+        <div className="min-h-screen flex flex-col items-center px-4">
+            <div className="w-full max-w-xl p-8">
+                {children}
+            </div>
+        </div>
+    );
+};
+
+export { FormContainer };
\ No newline at end of file
diff --git a/src/components/TextArea.tsx b/src/components/TextArea.tsx
new file mode 100644
index 00000000..605ee96d
--- /dev/null
+++ b/src/components/TextArea.tsx
@@ -0,0 +1,73 @@
+import { forwardRef } from 'react';
+import { Field, Label, Textarea } from '@headlessui/react';
+
+interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    label?: string;
+    error?: string;
+    description?: string;
+    value?: string;
+    required?: boolean;
+    onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+}
+
+const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
+    ({ label, error, description, className = '', value, required, onChange, ...props }, ref) => {
+        const inputProps = onChange
+            ? { value, onChange }
+            : { defaultValue: value };
+        
+        const sharedClassNames = `
+            w-full px-4 py-2
+            bg-white 
+            border border-gray-300 
+            rounded-md
+            focus:outline-none focus:ring-2 focus:ring-blue-500
+            data-[invalid]:border-red-500
+            min-h-[100px] resize-y
+            ${className}
+        `;
+
+        return (
+            <div className="w-full">
+                <Field>
+                    {label && (
+                        <div className="flex justify-between items-center mb-1">
+                            <Label className="block text-md font-normal">
+                                {label}
+                            </Label>
+                            {required && (
+                                <span className="text-sm text-gray-500">
+                                    Required
+                                </span>
+                            )}
+                        </div>
+                    )}
+
+                    <Textarea
+                        ref={ref}
+                        className={sharedClassNames}
+                        invalid={!!error}
+                        required={required}
+                        {...inputProps}
+                        {...props}
+                    />
+
+                    {description && (
+                        <div className="mt-1 text-sm text-gray-500">
+                            {description}
+                        </div>
+                    )}
+                    
+                    {error && (
+                        <div className="mt-1 text-sm text-red-500">
+                            {error}
+                        </div>
+                    )}
+                </Field>
+            </div>
+        );
+    }
+);
+
+TextArea.displayName = 'TextArea';
+export { TextArea };
\ No newline at end of file
diff --git a/src/components/TextInput.tsx b/src/components/TextInput.tsx
index e8777fd3..d8dbbbb0 100644
--- a/src/components/TextInput.tsx
+++ b/src/components/TextInput.tsx
@@ -6,43 +6,57 @@ interface TextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     error?: string;
     description?: string;
     value?: string;
+    required?: boolean;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
-    ({ label, error, description, className = '', value, onChange, ...props }, ref) => {
+    ({ label, error, description, className = '', value, required, onChange, ...props }, ref) => {
         const inputProps = onChange
             ? { value, onChange }
             : { defaultValue: value };
+        
+        const sharedClassNames = `
+            w-full px-4 py-3
+            bg-white 
+            border border-gray-300 
+            rounded-md
+            focus:outline-none focus:ring-2 focus:ring-blue-500
+            data-[invalid]:border-red-500
+            ${className}
+        `;
 
         return (
-            <div className="max-w-[400px] w-full">
+            <div className="w-full">
                 <Field>
                     {label && (
-                        <Label className="block text-2xl font-bold">
-                            {label}
-                        </Label>
+                        <div className="flex justify-between items-center mb-1">
+                            <Label className="block text-md font-normal">
+                                {label}
+                            </Label>
+                            {required && (
+                                <span className="text-sm text-gray-500">
+                                    Required
+                                </span>
+                            )}
+                        </div>
                     )}
+                    
                     <Input
                         ref={ref}
-                        className={`
-                            w-full py-3 px-4 
-                            bg-white 
-                            border border-gray-300 
-                            rounded-md
-                            focus:outline-none focus:ring-2 focus:ring-blue-500
-                            data-[invalid]:border-red-500
-                            ${className}
-                        `}
+                        className={sharedClassNames}
                         invalid={!!error}
+                        required={required}
                         {...inputProps}
                         {...props}
                     />
+
                     {description && (
                         <div className="mt-1 text-sm text-gray-500">
                             {description}
                         </div>
                     )}
+
                     {error && (
                         <div className="mt-1 text-sm text-red-500">
                             {error}
@@ -55,5 +69,4 @@ const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
 );
 
 TextInput.displayName = 'TextInput';
-
-export { TextInput }; 
\ No newline at end of file
+export { TextInput };
diff --git a/src/components/index.ts b/src/components/index.ts
index 52520c33..498fe9a5 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,5 +1,7 @@
 export { TextInput } from './TextInput';
+export { TextArea } from './TextArea';
 export { Dropdown } from './Dropdown';
 export { FileUpload } from './FileUpload';
 export { InfoCard } from './InfoCard';
 export { Button } from './Button';
+export { FormContainer } from './FormContainer';
\ No newline at end of file
diff --git a/src/components/tests/TextArea.test.tsx b/src/components/tests/TextArea.test.tsx
new file mode 100644
index 00000000..c523726b
--- /dev/null
+++ b/src/components/tests/TextArea.test.tsx
@@ -0,0 +1,65 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { TextArea } from '@components';
+
+describe('TextArea', () => {
+    it('renders with basic props', () => {
+        render(<TextArea placeholder="Enter text" />);
+        expect(screen.getByPlaceholderText('Enter text')).toBeInTheDocument();
+    });
+
+    it('renders label when provided', () => {
+        render(<TextArea label="Description" />);
+        expect(screen.getByText('Description')).toBeInTheDocument();
+    });
+
+    it('shows required text when required prop is true', () => {
+        render(<TextArea label="Description" required />);
+        expect(screen.getByText('Required')).toBeInTheDocument();
+    });
+
+    it('displays error message', () => {
+        render(<TextArea error="This field is required" />);
+        expect(screen.getByText('This field is required')).toBeInTheDocument();
+    });
+
+    it('displays description text', () => {
+        render(<TextArea description="Enter detailed description" />);
+        expect(screen.getByText('Enter detailed description')).toBeInTheDocument();
+    });
+
+    it('handles onChange events', async () => {
+        const handleChange = vi.fn();
+        render(<TextArea onChange={handleChange} />);
+
+        const textarea = screen.getByRole('textbox');
+        await userEvent.type(textarea, 'test');
+
+        expect(handleChange).toHaveBeenCalled();
+        expect(textarea).toHaveValue('test');
+    });
+
+    it('forwards ref correctly', () => {
+        const ref = vi.fn();
+        render(<TextArea ref={ref} />);
+        expect(ref).toHaveBeenCalled();
+    });
+
+    it('applies custom className', () => {
+        render(<TextArea className="custom-class" />);
+        expect(screen.getByRole('textbox')).toHaveClass('custom-class');
+    });
+
+    it('allows resizing', () => {
+        render(<TextArea />);
+        const textarea = screen.getByRole('textbox');
+        expect(textarea).toHaveClass('resize-y');
+    });
+
+    it('has minimum height', () => {
+        render(<TextArea />);
+        const textarea = screen.getByRole('textbox');
+        expect(textarea).toHaveClass('min-h-[100px]');
+    });
+});
\ No newline at end of file
diff --git a/src/components/tests/TextInput.tsx b/src/components/tests/TextInput.tsx
new file mode 100644
index 00000000..2894fbc3
--- /dev/null
+++ b/src/components/tests/TextInput.tsx
@@ -0,0 +1,53 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { TextInput } from '@components';
+
+describe('TextInput', () => {
+    it('renders with basic props', () => {
+        render(<TextInput placeholder="Enter text" />);
+        expect(screen.getByPlaceholderText('Enter text')).toBeInTheDocument();
+    });
+
+    it('renders label when provided', () => {
+        render(<TextInput label="Name" />);
+        expect(screen.getByText('Name')).toBeInTheDocument();
+    });
+
+    it('shows required text when required prop is true', () => {
+        render(<TextInput label="Name" required />);
+        expect(screen.getByText('Required')).toBeInTheDocument();
+    });
+
+    it('displays error message', () => {
+        render(<TextInput error="This field is required" />);
+        expect(screen.getByText('This field is required')).toBeInTheDocument();
+    });
+
+    it('displays description text', () => {
+        render(<TextInput description="Enter your full name" />);
+        expect(screen.getByText('Enter your full name')).toBeInTheDocument();
+    });
+
+    it('handles onChange events', async () => {
+        const handleChange = vi.fn();
+        render(<TextInput onChange={handleChange} />);
+
+        const input = screen.getByRole('textbox');
+        await userEvent.type(input, 'test');
+
+        expect(handleChange).toHaveBeenCalled();
+        expect(input).toHaveValue('test');
+    });
+
+    it('forwards ref correctly', () => {
+        const ref = vi.fn();
+        render(<TextInput ref={ref} />);
+        expect(ref).toHaveBeenCalled();
+    });
+
+    it('applies custom className', () => {
+        render(<TextInput className="custom-class" />);
+        expect(screen.getByRole('textbox')).toHaveClass('custom-class');
+    });
+});
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index b5c61c95..fb54bd32 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,9 @@
+@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+body {
+    font-family: 'Kanit', sans-serif;
+}
\ No newline at end of file
diff --git a/src/pages/Register.tsx b/src/pages/Register.tsx
new file mode 100644
index 00000000..096e5bef
--- /dev/null
+++ b/src/pages/Register.tsx
@@ -0,0 +1,300 @@
+import { useState, useEffect, FormEvent } from 'react';
+import { Button, TextInput, TextArea } from '@components';
+
+type RegistrationStep = 
+    | 'login-register'
+    | 'verify-email'
+    | 'signing-in'
+    | 'form-details'
+    | 'registration-complete';
+
+interface FormData {
+    firstName: string;
+    lastName: string;
+    position: string;
+    bio: string;
+    linkedIn: string;
+    email: string;
+    password: string;
+}
+
+interface FormErrors {
+    linkedIn?: string;
+    email?: string;
+    password?: string;
+}
+
+const Register = () => {
+    const [currentStep, setCurrentStep] = useState<RegistrationStep>('login-register');
+    const [formData, setFormData] = useState<FormData>({
+        firstName: '',
+        lastName: '',
+        position: '',
+        bio: '',
+        linkedIn: '',
+        email: '',
+        password: ''
+    });
+    const [errors, setErrors] = useState<FormErrors>({});
+
+    const LINKEDIN_REGEX = /^(https?:\/\/)?([\w]+\.)?linkedin\.com\/(pub|in|profile)\/([-a-zA-Z0-9]+)\/?$/;
+
+    const validateLinkedIn = (url: string): boolean => {
+        if (!url) return false;
+        return LINKEDIN_REGEX.test(url);
+    };
+
+    const handleLinkedInChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const { name, value } = e.target;
+        setFormData(prev => ({
+            ...prev,
+            [name]: value
+        }));
+
+        if (value && !validateLinkedIn(value)) {
+            setErrors(prev => ({
+                ...prev,
+                linkedIn: "Please enter a valid LinkedIn profile URL"
+            }));
+        } else {
+            setErrors(prev => ({
+                ...prev,
+                linkedIn: undefined
+            }));
+        }
+    };
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        const { name, value } = e.target;
+        setFormData(prev => ({
+            ...prev,
+            [name]: value
+        }));
+
+        if (errors[name as keyof FormErrors]) {
+            setErrors(prev => ({
+                ...prev,
+                [name]: undefined
+            }));
+        }
+    };
+
+    const handleInitialSubmit = (e: FormEvent) => {
+        e.preventDefault();
+        setCurrentStep('verify-email');
+    };
+
+    const handleFormSubmit = (e: FormEvent) => {
+        e.preventDefault();
+        setCurrentStep('registration-complete');
+    };
+
+    const isFormDetailsValid = (): boolean => {
+        return (
+            formData.firstName.trim() !== '' &&
+            formData.lastName.trim() !== '' &&
+            formData.position.trim() !== '' &&
+            formData.bio.trim() !== '' &&
+            formData.linkedIn.trim() !== '' && 
+            !errors.linkedIn
+        );
+    };
+
+    const renderLoginRegister = () => (
+        <div className="w-full max-w-md mx-auto p-6 bg-white rounded-lg">
+            <h3 className="text-center mb-4 font-light">Register or Login</h3>
+            <hr className="border-gray-400" />
+            <h2 className="text-2xl mt-4 font-normal">Register for Spur+Konfer</h2>
+            
+            <form onSubmit={handleInitialSubmit} className="space-y-4 mt-4">
+                <TextInput 
+                    label="Email" 
+                    required
+                    type="email"
+                    name="email"
+                    value={formData.email}
+                    onChange={handleChange}
+                />
+                
+                <TextInput 
+                    label="Password" 
+                    required
+                    type="password"
+                    name="password"
+                    value={formData.password}
+                    onChange={handleChange}
+                />
+                
+                <Button
+                    type="submit"
+                    size="lg"
+                    liquid
+                    variant="primary"
+                    // TODO: onClick to handle register
+                >
+                    Register
+                </Button>
+
+                <div className="text-center mt-4">
+                    <p className="text-md mb-3">
+                        Already have an account? 
+                    </p>
+                    <Button
+                        type="button"
+                        liquid
+                        size="lg"
+                        // TODO: onClick to handle login
+                    >
+                        Login
+                    </Button>
+                </div>
+            </form>
+        </div>
+    );
+
+    const renderVerifyEmail = () => (
+        <div className="w-full max-w-md mx-auto p-6 bg-white rounded-lg">
+            <h2 className="text-2xl mb-4">Verify your account</h2>
+            <p className="font-light mb-6">
+                Your account and wallet has been linked. We just sent an email confirmation to <span className="font-semibold">{formData.email}</span>. Please verify your account to continue registering.
+            </p>
+            
+            <div className="font-light mt-4">
+                <span>Didn't get the email? </span>
+                <button className="text-blue-500 hover:underline">Resend Link</button>
+            </div>
+        </div>
+    );
+
+    const renderSigningIn = () => {
+        useEffect(() => {
+            const timer = setTimeout(() => {
+                setCurrentStep('form-details');
+            }, 2000);
+
+            return () => clearTimeout(timer);
+        }, []);
+
+        return (
+            <div className="w-full max-w-md mx-auto p-6 bg-white rounded-lg text-center">
+                <h2 className="text-xl mb-4">Signing you in....</h2>
+                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 mx-auto" />
+            </div>
+        );
+    };
+
+    const renderFormDetails = () => (
+        <div className="w-full max-w-md mx-auto p-6">
+            <div className="text-center mb-8">
+                <h1 className="text-2xl font-bold">Welcome to Spur+Konfer</h1>
+                <p className="text-gray-600 mt-2">
+                    To begin your application, please enter your organization's details
+                </p>
+            </div>
+
+            <form onSubmit={handleFormSubmit} className="space-y-4">
+                <TextInput 
+                    label="Your first name" 
+                    required
+                    name="firstName"
+                    value={formData.firstName}
+                    onChange={handleChange}
+                />
+
+                <TextInput 
+                    label="Your last name" 
+                    required
+                    name="lastName"
+                    value={formData.lastName}
+                    onChange={handleChange}
+                />
+
+                <TextInput 
+                    label="Your position/title" 
+                    required
+                    name="position"
+                    value={formData.position}
+                    onChange={handleChange}
+                />
+
+                <TextArea
+                    label="Your bio" 
+                    required
+                    name="bio"
+                    value={formData.bio}
+                    onChange={handleChange}
+                />
+
+                <TextInput 
+                    label="Link to your LinkedIn" 
+                    required
+                    name="linkedIn"
+                    value={formData.linkedIn}
+                    onChange={handleLinkedInChange}
+                    error={errors.linkedIn}
+                />
+
+                <div className="pt-4">
+                    <Button 
+                        type="submit"
+                        disabled={!isFormDetailsValid()}
+                        liquid
+                        size="lg"
+                        variant="primary"
+                    > 
+                        Register
+                    </Button>
+                </div>
+
+                <p className="text-center text-sm mt-4">
+                    By registering, you agree to Spur+Konfers'<br />
+                    <a href="#" className="text-blue-500">Terms of Service</a> and <a href="#" className="text-blue-500">Privacy Policy</a>
+                </p>
+            </form>
+        </div>
+    );
+
+    const renderRegistrationComplete = () => {
+        useEffect(() => {
+            const timer = setTimeout(() => {
+                // TODO: Push to '/dashboard'
+            }, 2000);
+
+            return () => clearTimeout(timer);
+        }, []);
+
+        return (
+            <div className="w-full max-w-md mx-auto p-6 text-center">
+                <h2 className="text-xl mb-4">
+                    Thank you for registering, you will now be redirected to the dashboard
+                </h2>
+                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 mx-auto" />
+            </div>
+        );
+    };
+
+    const renderCurrentStep = () => {
+        switch (currentStep) {
+            case 'login-register':
+                return renderLoginRegister();
+            case 'verify-email':
+                return renderVerifyEmail();
+            case 'signing-in':
+                return renderSigningIn();
+            case 'form-details':
+                return renderFormDetails();
+            case 'registration-complete':
+                return renderRegistrationComplete();
+        }
+    };
+
+    return (
+        <div className="min-h-screen bg-gray-50">
+            <div className="p-4">
+                {renderCurrentStep()}
+            </div>
+        </div>
+    );
+};
+
+export { Register };
\ No newline at end of file
diff --git a/src/pages/index.ts b/src/pages/index.ts
index 61bb9687..cd53d11d 100644
--- a/src/pages/index.ts
+++ b/src/pages/index.ts
@@ -1 +1,2 @@
-export { Landing } from './Landing';
\ No newline at end of file
+export { Landing } from './Landing';
+export { Register } from './Register';
\ No newline at end of file
diff --git a/src/utils/Router.tsx b/src/utils/Router.tsx
index 5c7cd52d..b7e53d87 100644
--- a/src/utils/Router.tsx
+++ b/src/utils/Router.tsx
@@ -1,10 +1,11 @@
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import { Landing } from '@pages'
+import { Landing, Register } from '@pages'
 
 const Router = () => (
     <BrowserRouter>
         <Routes>
             <Route path="/" element={ <Landing /> } />
+            <Route path="/register" element={ <Register /> } />
         </Routes>
     </BrowserRouter>
 );
diff --git a/vitest.config.ts b/vitest.config.ts
index b446ddeb..2b7fa318 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -1,22 +1,32 @@
 import { defineConfig } from 'vitest/config';
 import react from '@vitejs/plugin-react';
+import path from 'path';
 
 export default defineConfig({
-  plugins: [react()],
-  test: {
-    environment: 'jsdom',
-    globals: true,
-    setupFiles: './src/test/setup.ts',
-    coverage: {
-      provider: 'v8',
-      reporter: ['text', 'json', 'html'],
-      exclude: [
-        'node_modules',
-        'src/test/setup.ts',
-        'vite.config.ts',
-        'eslint.config.js',
-        'vitest.config.ts',
-      ],
+    plugins: [react()],
+    test: {
+        environment: 'jsdom',
+        globals: true,
+        setupFiles: './src/test/setup.ts',
+        coverage: {
+            provider: 'v8',
+            reporter: ['text', 'json', 'html'],
+            exclude: [
+                'node_modules',
+                'src/test/setup.ts',
+                'vite.config.ts',
+                'eslint.config.js',
+                'vitest.config.ts',
+            ],
+        },
     },
-  },
+    resolve: {
+        alias: {
+            '@': path.resolve(__dirname, './src'),
+            '@assets': path.resolve(__dirname, './src/assets'),
+            '@components': path.resolve(__dirname, './src/components'),
+            '@pages': path.resolve(__dirname, './src/pages'),
+            '@utils': path.resolve(__dirname, './src/utils'),
+        }
+    }
 });