diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index 46268cd..0743edd 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -1,5 +1,6 @@
 <script>
     import { goto } from '$app/navigation';
+    import Navbar from '../Navbar.svelte';
     
     let username = '';
     let password = '';
diff --git a/src/services/api.js b/src/services/api.js
new file mode 100644
index 0000000..3a6856f
--- /dev/null
+++ b/src/services/api.js
@@ -0,0 +1,40 @@
+import { auth } from '../stores/auth';
+
+const API_BASE_URL = 'http://your-django-backend-url'; // Replace with your actual backend URL
+
+async function request(method, endpoint, data = null) {
+    const { token } = get(auth);
+    
+    const headers = {
+        'Content-Type': 'application/json',
+    };
+    
+    if (token) {
+        headers['Authorization'] = `Bearer ${token}`;
+    }
+    
+    const config = {
+        method,
+        headers,
+    };
+    
+    if (data) {
+        config.body = JSON.stringify(data);
+    }
+    
+    const response = await fetch(`${API_BASE_URL}${endpoint}`, config);
+    
+    if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error.detail || 'An error occurred');
+    }
+    
+    return await response.json();
+}
+
+export const api = {
+    get: (endpoint) => request('GET', endpoint),
+    post: (endpoint, data) => request('POST', endpoint, data),
+    put: (endpoint, data) => request('PUT', endpoint, data),
+    delete: (endpoint) => request('DELETE', endpoint),
+};
\ No newline at end of file
diff --git a/src/services/auth.js b/src/services/auth.js
new file mode 100644
index 0000000..48cf686
--- /dev/null
+++ b/src/services/auth.js
@@ -0,0 +1,41 @@
+import { api } from './api';
+import { setAuthTokens, clearAuth } from '../stores/auth';
+
+export async function login(username, password) {
+    try {
+        const response = await api.post('/api/token/', {
+            username,
+            password
+        });
+        
+        setAuthTokens(response.access, response.refresh);
+        return true;
+    } catch (error) {
+        clearAuth();
+        throw error;
+    }
+}
+
+export async function logout() {
+    clearAuth();
+}
+
+export async function refreshToken() {
+    const { refreshToken } = get(auth);
+    
+    if (!refreshToken) {
+        throw new Error('No refresh token available');
+    }
+    
+    try {
+        const response = await api.post('/api/token/refresh/', {
+            refresh: refreshToken
+        });
+        
+        setAuthTokens(response.access, refreshToken);
+        return response.access;
+    } catch (error) {
+        clearAuth();
+        throw error;
+    }
+}
\ No newline at end of file
diff --git a/src/stores/auth.js b/src/stores/auth.js
new file mode 100644
index 0000000..7e83372
--- /dev/null
+++ b/src/stores/auth.js
@@ -0,0 +1,27 @@
+import { writable } from 'svelte/store';
+
+export const auth = writable({
+    token: localStorage.getItem('token') || null,
+    refreshToken: localStorage.getItem('refreshToken') || null,
+    isAuthenticated: !!localStorage.getItem('token')
+});
+
+export function setAuthTokens(token, refreshToken) {
+    localStorage.setItem('token', token);
+    localStorage.setItem('refreshToken', refreshToken);
+    auth.set({
+        token,
+        refreshToken,
+        isAuthenticated: true
+    });
+}
+
+export function clearAuth() {
+    localStorage.removeItem('token');
+    localStorage.removeItem('refreshToken');
+    auth.set({
+        token: null,
+        refreshToken: null,
+        isAuthenticated: false
+    });
+}
\ No newline at end of file