diff --git a/README.md b/README.md
index d7fea79..d0326c4 100644
--- a/README.md
+++ b/README.md
@@ -20,9 +20,9 @@ useful when you want people to login to your static sveltekit site.
 
 ### or manually install in your own project
 
-- copy the `src/lib/oauth` folder into your own project
-- also copy the `src/routes/client-metadata.json` folder into your project
-- add the following to your `src/routes/+layout.svelte`
+1. copy the `src/lib/oauth` folder into your own project
+2. also copy the `src/routes/client-metadata.json` folder into your project
+3. add the following to your `src/routes/+layout.svelte`
 
 ```svelte
 <script>
@@ -36,6 +36,28 @@ useful when you want people to login to your static sveltekit site.
 {@render children()}
 ```
 
+4. add server and port to your `vite.config.ts`
+
+```js
+export default defineConfig({
+	server: {
+		host: '127.0.0.1',
+		port: 5179
+	}
+});
+```
+
+5. install the dependencies
+
+```bash
+npm install @atcute/oauth-browser-client @atcute/client
+```
+
+6. for deployment change the `SITE_URL` variable in `src/lib/oauth/const.ts` 
+(e.g. for github pages: `https://your-username.github.io`) and set your base in `svelte.config.js` 
+(e.g. for github pages: `base: '/your-repo-name/'`)
+
+
 ## how to use
 
 ### login flow
@@ -52,7 +74,8 @@ client.isLoggedIn; // check if the user is logged in
 client.logout(); // logout the user
 ```
 
-LoginModal is a component that renders a login modal, add it for a quick login flow.
+LoginModal is a component that renders a login modal, add it for a quick login flow. 
+(copy the `src/lib/UI` folder into your projects `src/lib` folder)
 
 ```svelte
 <script>
diff --git a/src/lib/oauth/UI/Button.svelte b/src/lib/UI/Button.svelte
similarity index 100%
rename from src/lib/oauth/UI/Button.svelte
rename to src/lib/UI/Button.svelte
diff --git a/src/lib/oauth/UI/LoginModal.svelte b/src/lib/UI/LoginModal.svelte
similarity index 98%
rename from src/lib/oauth/UI/LoginModal.svelte
rename to src/lib/UI/LoginModal.svelte
index 33e76be..9f6bb69 100644
--- a/src/lib/oauth/UI/LoginModal.svelte
+++ b/src/lib/UI/LoginModal.svelte
@@ -7,7 +7,7 @@
 </script>
 
 <script lang="ts">
-	import { login } from '../auth.svelte';
+	import { login } from '$lib/oauth/auth.svelte';
 	import Button from './Button.svelte';
 	import { tick } from 'svelte';
 
diff --git a/src/lib/oauth/index.ts b/src/lib/oauth/index.ts
index 15c653b..05c0fb9 100644
--- a/src/lib/oauth/index.ts
+++ b/src/lib/oauth/index.ts
@@ -1,6 +1,6 @@
 import { client, login, logout, initClient } from './auth.svelte';
-import LoginModal, { loginModalState } from './UI/LoginModal.svelte';
-import Button from './UI/Button.svelte';
+import LoginModal, { loginModalState } from '../UI/LoginModal.svelte';
+import Button from '../UI/Button.svelte';
 import { metadata } from './const';
 
 export { metadata, client, login, logout, initClient, LoginModal, Button, loginModalState };