diff --git a/README.md b/README.md
index 87f191d..4f48145 100644
--- a/README.md
+++ b/README.md
@@ -23,6 +23,28 @@ Fork this repo to your own account and create a pull request for changes you hav
- [Node.js](https://nodejs.org/) (v18 or higher. v20 is recommended)
- npm (comes with Node.js)
+Set up VScode
+
+1. install [VSCode](https://code.visualstudio.com/)
+
+2. Recommended: wsl2 for windows users
+
+You might need to enable virtualization in BIOS unless it is already enabled. It can be checked by looking for "Virtualization" in Task Manager > Performance tab.
+
+```bash
+dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
+dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart
+```
+
+```bash
+wsl --set-default-version 2
+```
+
+install [Ubuntu from Microsoft Store](https://apps.microsoft.com/store/detail/ubuntu/9NBLGGH4MSV6)
+
+
{$text.key}
//replace the key with the translation key example: "nav.about" -``` - -## Styling - -Look at `src/app.css` for global styles and CSS variables. Each Svelte component can also have its own styles scoped to that component - -Variables are defined in `:root` - -we only have 3 colors in out palette + 2 variants: - -- `--orange` -- `--black` -- `--white` - -- `--off-white` -- `--off-black` - -Add new ones only if they seem universal enough to be used in multiple places, don't add stuff like `--space-100: -888px` noone else will ever use that, if you really need it just add it to the component's own style block - -## Layout - -Try to use the existing layout components in `src/app.css` as much as possible to keep things consistent across the site. - -> [!NOTE] -> These components are standard html components like h1, p, a, ul, li, etc but styled to fit the site's look and feel. Use html components defined in `src/app.css` unless you have a very good reason not to. - -If there are no existing components that fit your needs, feel free to add new ones but try to keep them generic enough to be reused in other places. Extra styiling can be added in the component's own style block as needed. - -## Responsive design - -There are also helper classes for responsive design: - -- `desktop-only` - hides content on mobile devices -- `mobile-only` - hides content on desktop devices - -These classes use media queries defined in `src/app.css` based on common breakpoints. - -also things like `.stack`, `.inline`, `.grid`. Go look at `src/app.css` for what they do. - -## Routing - -Routing is handled by the custom router in `src/lib/Router.svelte` and `src/lib/router/router.js`. -To add new routes, edit `src/routes/index.js` and add your new route there. - -Import router functions as: - -```js -import { navigate, goBack, reload, getPath, getQuery } from "$lib"; // only import what you need -```