Initial Commit

2025-04-06 13:44:58 +00:00 · 2023-09-18 21:01:07 +03:30 · 2023-09-18 21:01:07 +03:30 · e4413590ce
commit e4413590ce
parent 14a4cdd591
57 changed files with 2016 additions and 803 deletions
--- a/24
+++ b/24
@ -1,21 +1,3 @@
-FROM --platform=$BUILDPLATFORM golang:1.20-alpine as gost
-
-# Convert TARGETPLATFORM to GOARCH format
-# https://github.com/tonistiigi/xx
-COPY --from=tonistiigi/xx:golang / /
-
-ARG TARGETPLATFORM
-
-RUN apk add --no-cache musl-dev git gcc
-
-WORKDIR /src
-
-RUN git clone https://github.com/ginuerzh/gost.git
-
-ENV GO111MODULE=on
-
-RUN cd gost/cmd/gost && go env && go build -v
-
 FROM docker.io/library/node:alpine
 WORKDIR /app

@ -23,15 +5,17 @@ ENV TZ=UTC
 RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone

 COPY --from=golang:1.20-alpine /usr/local/go/ /usr/local/go/
-COPY --from=gost /src/gost/cmd/gost/gost /usr/local/bin/gost
+COPY --from=gogost/gost /bin/gost /usr/local/bin/gost

-COPY src/ /app/
+COPY /src/ /app/
+COPY /config/torrc /etc/tor/torrc

 RUN apk add -U --no-cache \
  iproute2 iptables net-tools \
  screen vim curl bash \
  wireguard-tools \
  dumb-init \
+  tor \
  redis

 EXPOSE 3000/tcp
--- a/config/torrc
+++ b/config/torrc
--- a/docker-entrypoint.sh
+++ b/docker-entrypoint.sh
@ -18,4 +18,7 @@ fi
 # Starting Redis server in detached mode
 screen -dmS redis bash -c "redis-server --port 6479 --daemonize no --dir /data --appendonly yes"

+# Start Tor in the background
+screen -dmS tor bash -c "tor -f /etc/tor/torrc"
+
 exec "$@"
--- a/src/.gitignore
+++ b/src/.gitignore
@ -25,11 +25,10 @@ yarn-debug.log*
 yarn-error.log*

 # local env files
-.env*.local
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local

 # vercel
 .vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts
--- a/src/.npmrc
+++ b/src/.npmrc
@ -0,0 +1 @@
+auto-install-peers = true
--- a/src/README.md
+++ b/src/README.md
@ -1,38 +1,28 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-
 ## Getting Started

 First, run the development server:

 ```bash
-npm run dev
-# or
 yarn dev
-# or
-pnpm dev
 ```

 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.

-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+To create [API routes](https://nextjs.org/docs/app/building-your-application/routing/router-handlers) add an `api/` directory to the `app/` directory with a `route.ts` file. For individual endpoints, create a subfolder in the `api` directory, like `api/hello/route.ts` would map to [http://localhost:3000/api/hello](http://localhost:3000/api/hello).

 ## Learn More

 To learn more about Next.js, take a look at the following resources:

 - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+- [Learn Next.js](https://nextjs.org/learn/foundations/about-nextjs) - an interactive Next.js tutorial.

 You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

 ## Deploy on Vercel

-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_source=github.com&utm_medium=referral&utm_campaign=turborepo-readme) from the creators of Next.js.

 Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
--- a/src/components/BasePage.tsx
+++ b/src/components/BasePage.tsx
@ -1,28 +0,0 @@
-import React from "react";
-import { Layout } from "antd";
-import { twMerge } from "tailwind-merge";
-
-const { Header, Footer, Content } = Layout;
-
-export type BasePageProps = {
-  rootClassName: string
-  className: string
-  children: React.ReactNode
-}
-
-export default function BasePage(props: BasePageProps): React.ReactElement {
-  return (
-     <Layout className={'w-full min-h-screen'}>
-       <Header>Header</Header>
-       <Content
-          className={twMerge(
-             'w-full max-w-full md:max-w-[700px] lg:max-w-[1140px] xl:max-w-[1300px] 2xl:max-w-[1400px]',
-             'space-y-3.5',
-             props.className
-          )}>
-         {props.children}
-       </Content>
-       <Footer>Footer</Footer>
-     </Layout>
-  )
-}
--- a/src/lib/typings.ts
+++ b/src/lib/typings.ts
@ -1,30 +1,14 @@
 import { z } from "zod";
+import type React from "react";
+import { IPV4_REGEX } from "@lib/constants";
+import { NextApiRequest as TNextApiRequest } from "next/dist/shared/lib/utils";

-const WgPeerSchema = z.object({
-  id: z.string().uuid(),
-  name: z.string().regex(/^[A-Za-z\d\s]{3,32}$/),
-  publicKey: z.string(),
+export const WgKeySchema = z.object({
  privateKey: z.string(),
-  preSharedKey: z.string(),
-  endpoint: z.string(),
-  address: z.string(),
-  latestHandshakeAt: z.string().nullable(),
-  transferRx: z.number().nullable(),
-  transferTx: z.number().nullable(),
-  persistentKeepalive: z.number().nullable(),
-  createdAt: z.string().datetime(),
-  updatedAt: z.string().datetime(),
-  enabled: z.boolean(),
+  publicKey: z.string(),
 })

-export type WgPeer = z.infer<typeof WgPeerSchema>
-
-// gPmJda6TojTSaJZmsEJjDINKLX+WwMZJch/GNv75R2A=
-
-export interface WgKey {
-  privateKey: string
-  publicKey: string
-}
+export type WgKey = z.infer<typeof WgKeySchema>

 export interface WgPeerConfig {
  publicKey: string
@ -34,21 +18,64 @@ export interface WgPeerConfig {
  persistentKeepalive: number | null
 }

-export interface WgServer {
-  id: string
-  name: string
-  address: string
-  listen: number
+const WgPeerSchema = z.object({
+  id: z.string().uuid(),
+  name: z.string().regex(/^[A-Za-z\d\s]{3,32}$/),
+  preSharedKey: z.string(),
+  endpoint: z.string(),
+  address: z.string().regex(IPV4_REGEX),
+  latestHandshakeAt: z.string().nullable(),
+  transferRx: z.number().nullable(),
+  transferTx: z.number().nullable(),
+  persistentKeepalive: z.number().nullable(),
+  createdAt: z.string().datetime(),
+  updatedAt: z.string().datetime(),
+  enabled: z.boolean(),
+})
+   .merge(WgKeySchema)
+
+export type WgPeer = z.infer<typeof WgPeerSchema>
+
+export const WgServerSchema = z.object({
+  id: z.string().uuid(),
+  confId: z.number(),
+  type: z.enum([ 'default', 'bridge', 'tor' ]),
+  name: z.string().regex(/^[A-Za-z\d\s]{3,32}$/),
+  address: z.string().regex(IPV4_REGEX),
+  listen: z.number(),
+  preUp: z.string().nullable(),
+  postUp: z.string().nullable(),
+  preDown: z.string().nullable(),
+  postDown: z.string().nullable(),
+  dns: z.string().regex(IPV4_REGEX).nullable(),
+  peers: z.array(WgPeerSchema),
+  createdAt: z.string().datetime(),
+  updatedAt: z.string().datetime(),
+  status: z.enum([ 'up', 'down' ]),
+})
+   .merge(WgKeySchema)
+
+export type WgServer = z.infer<typeof WgServerSchema>
+
+export type ReactHTMLProps<T extends HTMLElement> = React.DetailedHTMLProps<React.HTMLAttributes<T>, T>
+
+export type APIErrorResponse = {
+  ok: false
+  details: string
 }

-export interface WgServerConfig {
-  privateKey: string
-  address: string
-  listen: number
-  preUp: string | null
-  postUp: string | null
-  preDown: string | null
-  postDown: string | null
-  dns: string | null
-  mtu: number
+export type APISuccessResponse<D> = {
+  ok: true
+  result: D
 }
+
+export type APIResponse<D, N extends boolean = false> = N extends true ? D : APIErrorResponse | APISuccessResponse<D>
+
+export type NextApiRequest<
+   P = Record<string, string | string[] | undefined>,
+   Q = Record<string, string | string[] | undefined>
+> = Omit<TNextApiRequest, 'query'> & {
+  query: Partial<Q> & P
+}
+
+export type LeastOne<T, U = { [K in keyof T]: Pick<T, K> }> = Partial<T> & U[keyof U];
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@ -4,10 +4,25 @@ export function isValidIPv4(str: string): boolean {
  return IPV4_REGEX.test(str);
 }

-export function isBetween(v:any,n1:number,n2:number): boolean {
-  if (Number.isNaN(v)){
+export function isBetween(v: any, n1: number, n2: number): boolean {
+  if (Number.isNaN(v)) {
    return false
  }
  const n = Number(v)
  return n1 <= n && n >= n2
 }
+
+export function isJson(str: string | object): boolean {
+  if (typeof str === 'object' && isObject(str)) {
+    return true;
+  }
+  try {
+    return typeof str === 'string' && JSON.parse(str);
+  } catch (ex) {
+    return false;
+  }
+}
+
+export function isObject(obj: object) {
+  return Object.prototype.toString.call(obj) === '[object Object]';
+}
--- a/src/lib/wireguard.ts
+++ b/src/lib/wireguard.ts
@ -1,8 +1,11 @@
 import { promises as fs } from "fs";
 import path from "path";
 import QRCode from "qrcode";
-import { WG_PATH } from "@/lib/constants";
-import Shell from "@/lib/shell";
+import { WG_PATH } from "@lib/constants";
+import Shell from "@lib/shell";
+import { WgKey, WgPeer, WgServer, WgServerConfig } from "@lib/typings";
+import { client, WG_SEVER_PATH } from "@lib/redis";
+import { isJson } from "@lib/utils";

 export class WireGuardServer {

@ -12,7 +15,6 @@ export class WireGuardServer {
    this.serverId = serverId
  }

-
  async getConfig() {
    if (!this.__configPromise) {
      this.__configPromise = Promise.resolve().then(async () => {
@ -68,7 +70,6 @@ export class WireGuardServer {
    return this.__configPromise;
  }

-
  async saveConfig() {
    const config = await this.getConfig();
    await this.__saveConfig(config);
@ -123,9 +124,7 @@ AllowedIPs = ${client.address}/32`;
    }));

    // Loop WireGuard status
-    const dump = await Util.exec('wg show wg0 dump', {
-      log: false,
-    });
+    const dump = await Shell.exec(`wg show wg${this.serverId} dump`);
    dump
       .trim()
       .split('\n')
@ -180,11 +179,8 @@ Endpoint = ${WG_HOST}:${WG_PORT}`;
  }

  async getClientQRCodeSVG(clientId: string) {
-    const config = await this.getClientConfiguration({ clientId });
-    return QRCode.toString(config, {
-      type: 'svg',
-      width: 512,
-    });
+    const config = await this.getClientConfiguration(clientId);
+    return QRCode.toString(config, { type: 'svg', width: 512 });
  }

  async createClient(name: string) {
@ -214,7 +210,6 @@ Endpoint = ${WG_HOST}:${WG_PORT}`;
 }


-
 /**
 * Used to read /etc/wireguard/*.conf and sync them with our
 * redis server.
@ -236,29 +231,119 @@ export async function generateWgKey(): Promise<WgKey> {
 export async function generateWgServer(config: {
  name: string
  address: string
+  type: WgServer['type']
  port: number
  dns?: string
  mtu?: number
-}): Promise<number> {
+}): Promise<string> {

  const { privateKey, publicKey } = await generateWgKey();

  // inside redis create a config list
+  const confId = await maxConfId() + 1
+  const uuid = crypto.randomUUID()

+  const server: WgServer = {
+    id: uuid,
+    confId,
+    type: config.type,
+    name: config.name,
+    address: config.address,
+    listen: config.port,
+    dns: config.dns || null,
+    privateKey,
+    publicKey,
+    preUp: null,
+    preDown: null,
+    postDown: null,
+    postUp: null,
+    peers: [],
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+    status: 'up'
+  }

+  // check if address or port are already reserved
+  const [ addresses, ports ] = (await getServers())
+     .map((s) => [ s.address, s.listen ])

-}
+  // check for the conflict
+  if (addresses.includes(config.address)) {
+    throw new Error(`Address ${config.address} is already reserved!`)
+  }

-async function f() {
+  if (ports.includes(config.port)) {
+    throw new Error(`Port ${config.port} is already reserved!`)
+  }

-  const { privateKey, publicKey } = await generateWgKey()
+  // save server config
+  await client.lpush(WG_SEVER_PATH, JSON.stringify(server))

-  await generateWgServer({
-    name: 'Primary',
-    address: '10.8.0.0',
-    port: 50210,
-    mtu: 1420
+  // save server config to disk
+  await fs.writeFile(path.join(WG_PATH, `wg${confId}.conf`), getServerConf(server), {
+    mode: 0o600,
  })

+  // restart wireguard
+  await Shell.exec(`wg-quick down wg${confId}`)
+  await Shell.exec(`wg-quick up wg${confId}`)
+
+  // return server id
+  return uuid
 }

+export function getServerConf(server: WgServer): string {
+  return `
+# Autogenerated by WireGuard UI (WireAdmin) 
+[Interface]
+PrivateKey = ${server.privateKey}
+Address = ${server.address}/24
+ListenPort = ${server.listen}
+${server.dns ? `DNS = ${server.dns}` : ''}
+
+PreUp = ${server.preUp}
+PostUp = ${server.postUp}
+PreDown = ${server.preDown}
+PostDown = ${server.postDown}
+
+${server.peers.map(getPeerConf).join('\n')}
+ `
+}
+
+export function getPeerConf(peer: WgPeer): string {
+  return `
+[Peer]
+PublicKey = ${peer.publicKey}
+${peer.preSharedKey ? `PresharedKey = ${peer.preSharedKey}` : ''}
+AllowedIPs = ${peer.address}/32
+${peer.persistentKeepalive ? `PersistentKeepalive = ${peer.persistentKeepalive}` : ''}
+ `
+}
+
+export async function maxConfId(): Promise<number> {
+  // get files in /etc/wireguard
+  const files = await fs.readdir(WG_PATH)
+  // filter files that start with wg and end with .conf
+  const reg = new RegExp(/^wg(\d+)\.conf$/)
+  const confs = files.filter((f) => reg.test(f))
+  const ids = confs.map((f) => {
+    const m = f.match(reg)
+    if (m) {
+      return parseInt(m[1])
+    }
+    return 0
+  })
+  return Math.max(0, ...ids)
+}
+
+export async function getServers(): Promise<WgServer[]> {
+  return (await client.lrange(WG_SEVER_PATH, 0, -1)).map((s) => JSON.parse(s))
+}
+
+export async function findServer(id: string | undefined, hash: string | undefined): Promise<WgServer | undefined> {
+  const servers = await getServers()
+  return id ?
+     servers.find((s) => s.id === hash) :
+     hash && isJson(hash) ? servers.find((s) => JSON.stringify(s) === hash) :
+        undefined
+}
--- a/src/next.config.js
+++ b/src/next.config.js
@ -1,6 +1,4 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
+module.exports = {
  reactStrictMode: true,
-}
-
-module.exports = nextConfig
+  transpilePackages: ["ui"],
+};
--- a/src/package-lock.json
+++ b/src/package-lock.json
--- a/src/package.json
+++ b/src/package.json
@ -1,6 +1,6 @@
 {
-  "name": "wireguard-gui",
-  "version": "0.1.0",
+  "name": "web",
+  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
@ -9,24 +9,34 @@
    "lint": "next lint"
  },
  "packageManager": "npm@9.7.2",
+  "workspaces": [
+    "packages/*"
+  ],
  "dependencies": {
-    "@types/node": "20.5.8",
-    "@types/react": "18.2.21",
-    "@types/react-dom": "18.2.7",
-    "antd": "^5.8.6",
-    "autoprefixer": "10.4.15",
+    "antd": "5.8.6",
    "clsx": "^2.0.0",
+    "crypto-js": "^4.1.1",
    "dotenv": "16.3.1",
    "ioredis": "5.3.2",
    "next": "13.4.19",
    "next-auth": "4.23.1",
-    "postcss": "8.4.29",
    "qrcode": "^1.5.3",
    "react": "18.2.0",
    "react-dom": "18.2.0",
+    "swr": "^2.2.2",
    "tailwind-merge": "^1.14.0",
-    "tailwindcss": "3.3.3",
-    "typescript": "5.2.2",
    "zod": "^3.22.2"
+  },
+  "devDependencies": {
+    "@next/eslint-plugin-next": "13.4.19",
+    "@types/crypto-js": "^4.1.2",
+    "@types/node": "20.5.9",
+    "@types/react": "18.2.21",
+    "@types/react-dom": "18.2.7",
+    "autoprefixer": "10.4.15",
+    "postcss": "8.4.29",
+    "tailwindcss": "3.3.3",
+    "tsconfig": "*",
+    "typescript": "5.2.2"
  }
 }
--- a/src/packages/tsconfig/base.json
+++ b/src/packages/tsconfig/base.json
@ -0,0 +1,21 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "Default",
+  "compilerOptions": {
+    "composite": false,
+    "declaration": true,
+    "declarationMap": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "inlineSources": false,
+    "isolatedModules": true,
+    "moduleResolution": "node",
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "preserveWatchOutput": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "strictNullChecks": true
+  },
+  "exclude": ["node_modules"]
+}
--- a/src/packages/tsconfig/nextjs.json
+++ b/src/packages/tsconfig/nextjs.json
@ -0,0 +1,21 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "Next.js",
+  "extends": "./base.json",
+  "compilerOptions": {
+    "plugins": [{ "name": "next" }],
+    "allowJs": true,
+    "declaration": false,
+    "declarationMap": false,
+    "incremental": true,
+    "jsx": "preserve",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "module": "esnext",
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "strict": false,
+    "target": "es5",
+  },
+  "include": ["src", "next-env.d.ts"],
+  "exclude": ["node_modules"]
+}
--- a/src/packages/tsconfig/package.json
+++ b/src/packages/tsconfig/package.json
@ -0,0 +1,9 @@
+{
+  "name": "tsconfig",
+  "version": "0.0.0",
+  "private": true,
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  }
+}
--- a/src/packages/tsconfig/react-library.json
+++ b/src/packages/tsconfig/react-library.json
@ -0,0 +1,11 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "React Library",
+  "extends": "./base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "lib": ["ES2015", "DOM"],
+    "module": "ESNext",
+    "target": "es6"
+  }
+}
--- a/src/pages/[serverId]/index.tsx
+++ b/src/pages/[serverId]/index.tsx
@ -0,0 +1,84 @@
+import { Button, Card } from "antd";
+import BasePage from "@ui/pages/BasePage";
+import PageRouter from "@ui/pages/PageRouter";
+import React from "react";
+import { PlusOutlined } from "@ant-design/icons";
+import useSWR from "swr";
+import { APIResponse } from "@lib/typings";
+
+
+export async function getServerSideProps(context: any) {
+  return {
+    props: {
+      serverId: context.params.serverId
+    }
+  }
+}
+
+type PageProps = {
+  serverId: string
+}
+
+export default function ServerPage(props: PageProps) {
+  const { data, error, isLoading } = useSWR(`/api/wireguard/${props.serverId}`, async (url: string) => {
+    const resp = await fetch(url, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    })
+    const data = await resp.json() as APIResponse<any>
+    if (!data.ok) throw new Error('Server responded with error status')
+    return data.result
+  })
+  return (
+     <BasePage>
+       <PageRouter
+          route={[
+            { title: 'SERVER_ID' }
+          ]}
+       />
+       {error ? (
+          <Card className={'flex items-center justify-center p-4'}>
+            ! ERROR !
+          </Card>
+       ) : isLoading ? (
+          <Card className={'flex items-center justify-center p-4'}>
+            Loading...
+          </Card>
+       ) : (
+          <div className={'space-y-4'}>
+            <Card>
+              <div className={'flex items-center gap-x-2'}>
+                {data.status === 'up' ? (
+                   <React.Fragment>
+                     <Button> Restart </Button>
+                     <Button> Stop </Button>
+                   </React.Fragment>
+                ) : (
+                   <React.Fragment>
+                     <Button type={'primary'} className={'bg-green-500'}> Start </Button>
+                     <Button danger={true}> Remove </Button>
+                   </React.Fragment>
+                )}
+              </div>
+            </Card>
+
+            <Card
+               className={'[&>.ant-card-body]:p-0'}
+               title={<span> Clients </span>}
+            >
+              <div className={'flex flex-col items-center justify-center gap-y-4 py-8'}>
+                <p className={'text-gray-400 text-md'}>
+                  There are no clients yet!
+                </p>
+                <Button type={'primary'} icon={<PlusOutlined />}>
+                  Add a client
+                </Button>
+              </div>
+            </Card>
+          </div>
+       )}
+     </BasePage>
+  );
+}
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@ -7,7 +7,7 @@ import { ConfigProvider } from "antd";
 const theme: ThemeConfig = {
  token: {
    fontSize: 16,
-    colorPrimary: '#52c41a',
+    colorPrimary: '#991b1b',
  },
 };

--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@ -3,7 +3,9 @@ import { Html, Head, Main, NextScript } from 'next/document'
 export default function Document() {
  return (
    <Html lang="en">
-      <Head />
+      <Head>
+        <link rel={'stylesheet'} href={'/fonts/fontawesome/index.css'} />
+      </Head>
      <body>
        <Main />
        <NextScript />
--- a/src/pages/api/ping.ts
+++ b/src/pages/api/ping.ts
@ -1,6 +1,6 @@
 import type { NextApiRequest, NextApiResponse } from 'next'
 import { client } from "@/lib/redis";
-import safeServe from "@/lib/safe-serve";
+import safeServe from "@lib/safe-serve";

 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  return safeServe(res, async () => {
--- a/src/pages/api/wireguard/[serverId]/index.ts
+++ b/src/pages/api/wireguard/[serverId]/index.ts
@ -1,9 +1,14 @@
-import type { NextApiRequest, NextApiResponse } from 'next'
-import safeServe from "@/lib/safe-serve";
+import type { NextApiRequest, NextApiResponse } from "next";
+import safeServe from "@lib/safe-serve";
+import { findServer } from "@lib/wireguard";

 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  return safeServe(res, async () => {

+    if (req.method === 'GET') {
+      return get(req, res)
+    }
+
    if (req.method === 'PUT') {
      return update(req, res)
    }
@ -19,6 +24,15 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
  })
 }

+async function get(req: NextApiRequest, res: NextApiResponse) {
+
+  const server = findServer()
+
+  return res
+     .status(500)
+     .json({ ok: false, details: 'Not yet implemented!' })
+}
+
 async function update(req: NextApiRequest, res: NextApiResponse) {
  return res
     .status(500)
--- a/src/pages/api/wireguard/createServer.ts
+++ b/src/pages/api/wireguard/createServer.ts
@ -1,5 +1,5 @@
 import type { NextApiRequest, NextApiResponse } from 'next'
-import safeServe from "@/lib/safe-serve";
+import safeServe from "@lib/safe-serve";
 import { z } from "zod";
 import { IPV4_REGEX } from "@/lib/constants";
 import { client, WG_SEVER_PATH } from "@/lib/redis";
--- a/src/pages/api/wireguard/listServers.ts
+++ b/src/pages/api/wireguard/listServers.ts
@ -1,6 +1,6 @@
 import type { NextApiRequest, NextApiResponse } from 'next'
-import safeServe from "@/lib/safe-serve";
-import { client, WG_SEVER_PATH } from "@/lib/redis";
+import safeServe from "@lib/safe-serve";
+import { getServers } from "@lib/wireguard";

 export default function handler(req: NextApiRequest, res: NextApiResponse) {
  return safeServe(res, async () => {
@ -11,11 +11,12 @@ export default function handler(req: NextApiRequest, res: NextApiResponse) {
         .json({ ok: false, details: 'Method not allowed' })
    }

-    const servers = await client.lrange(WG_SEVER_PATH, 0, -1)
-
    return res
       .status(200)
-       .json({ ok: true, result: servers.map((s)=> JSON.parse(s)) })
+       .json({
+         ok: true,
+         result: (await getServers()).map((s) => s)
+       })

  })
 }
--- a/src/pages/api/wireguard/reset.ts
+++ b/src/pages/api/wireguard/reset.ts
@ -0,0 +1,38 @@
+import type { NextApiRequest, NextApiResponse } from 'next'
+import safeServe from "@lib/safe-serve";
+import { client, WG_SEVER_PATH } from "@lib/redis";
+import fs from "fs";
+import Shell from "@lib/shell";
+import path from "path";
+import { WG_PATH } from "@lib/constants";
+
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+  return safeServe(res, async () => {
+
+    if (req.method !== 'GET') {
+      return res
+         .status(400)
+         .json({ ok: false, details: 'Method not allowed' })
+    }
+
+    // delete all servers
+    await client.del(WG_SEVER_PATH)
+
+    // delete every file in /etc/wireguard
+    fs.readdirSync(WG_PATH).forEach((file) => {
+      const reg = new RegExp(/^wg(\d+)\.conf$/)
+      const m = file.match(reg)
+      if (m) {
+        const confId = parseInt(m[1])
+        Shell.exec(`wg-quick down wg${confId}`).catch()
+        fs.unlinkSync(path.join(WG_PATH, file))
+      }
+    })
+
+    return res
+       .status(200)
+       .json({ ok: true })
+
+  })
+}
+
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@ -1,12 +1,153 @@
-import { Card } from "antd";
-import BasePage from "@/components/BasePage";
+import React from "react";
+import { Badge, Button, Card, List, Segmented } from "antd";
+import BasePage from "@ui/pages/BasePage";
+import { APIResponse, WgServer } from "@lib/typings";
+import { PlusOutlined } from "@ant-design/icons";
+import Image, { ImageProps } from "next/image";
+import Link from "next/link";
+import PageRouter from "@ui/pages/PageRouter";
+import useSWR from "swr";
+import SmartModal, { SmartModalRef } from "@ui/SmartModal";
+import { twMerge } from "tailwind-merge";

 export default function Home() {
+  const { data, error, isLoading } = useSWR('/api/wireguard/listServers', async (url: string) => {
+    const resp = await fetch(url, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    })
+    const data = await resp.json() as APIResponse<any>
+    if (!data.ok) throw new Error('Server responded with error status')
+    return data.result
+  })
+  const createServerRef = React.useRef<SmartModalRef | null>(null)
  return (
     <BasePage>
-       <Card>
-         Hi
-       </Card>
+       <PageRouter className={'flex items-center justify-between'}>
+         <h2 className={'font-bold text-xl'}> Hello there 👋 </h2>
+         {data && data.length > 0 && (
+            <Button type={'default'} icon={<PlusOutlined />} onClick={() => createServerRef.current?.open()}>
+              New server
+            </Button>
+         )}
+       </PageRouter>
+       <SmartModal
+          ref={createServerRef}
+          title={null}
+          footer={null}
+          rootClassName={'w-full max-w-[340px]'}
+       >
+         <div className={'flex items-center justify-center'}>
+           <Segmented
+              className={'select-none'}
+              options={[
+                { label: 'Direct', value: 'default', icon: <i className={'far fa-arrows-left-right-to-line'} /> },
+                { label: 'Tor', value: 'tor', icon: <TorOnion /> }
+              ]}
+           />
+         </div>
+       </SmartModal>
+       <div className={'space-y-4'}>
+         {error ? (
+            <Card className={'flex items-center justify-center p-4'}>
+              ! ERROR !
+            </Card>
+         ) : isLoading ? (
+            <Card className={'flex items-center justify-center p-4'}>
+              Loading...
+            </Card>
+         ) : data.length > 0 ? (
+            <Card
+               className={'[&>.ant-card-body]:p-0'}
+               title={<span> Servers </span>}
+            >
+              <List>
+                {data.map((s) => <Server {...s} />)}
+              </List>
+            </Card>
+         ) : (
+            <Card>
+              <div className={'flex flex-col items-center justify-center gap-y-4 py-8'}>
+                <p className={'text-gray-400 text-md'}>
+                  There are no servers yet!
+                </p>
+                <Button type={'primary'} icon={<PlusOutlined />} onClick={() => createServerRef.current?.open()}>
+                  Add a server
+                </Button>
+              </div>
+            </Card>
+         )}
+       </div>
     </BasePage>
  );
 }
+
+function Server(s: WgServer) {
+  return (
+     <List.Item className={'flex items-center justify-between p-4'}>
+       <div className={'w-full grid grid-cols-12 items-center gap-x-2'}>
+         <ServerIcon type={s.type} className={'col-span-1'} />
+         <h3 className={'font-medium col-span-4'}> {s.name} </h3>
+         <div className={'col-span-4 justify-end'}>
+           <Badge
+              size={'small'}
+              color={s.status === 'up' ? 'rgb(82, 196, 26)' : 'rgb(255, 77, 79)'}
+              text={s.status === 'up' ? 'Running' : 'Stopped'}
+           />
+         </div>
+       </div>
+       <Link href={`/${s.id}`}>
+         <Button type={'primary'}>
+           Manage
+         </Button>
+       </Link>
+     </List.Item>
+  )
+}
+
+type ServerIconProps = {
+  type: WgServer['type']
+  className?: string
+}
+
+function ServerIcon(props: ServerIconProps) {
+  return (
+     <div className={props.className}>
+       <div className={'w-fit relative'}>
+         <Image
+            src={'/vps.29373866.svg'}
+            alt={'VPS'}
+            width={34}
+            height={34}
+         />
+         {props.type !== 'default' && (
+            <div className={'absolute -bottom-1 -right-2 rounded-full bg-white'}>
+              {props.type === 'tor' && (
+                 <Image
+                    src={'/tor-onion.svg'}
+                    alt={'Tor'}
+                    width={20}
+                    height={20}
+                 />
+              )}
+            </div>
+         )}
+       </div>
+     </div>
+  )
+}
+
+export function TorOnion(props: Omit<ImageProps, 'src' | 'alt'>) {
+  return (
+     <Image
+        width={20}
+        height={20}
+        {...props}
+        alt={'Tor'}
+        className={twMerge('inline-block', props.className)}
+        src={'/tor-onion.svg'}
+     />
+  )
+}
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@ -1,8 +1,8 @@
 import { signIn, signOut, useSession } from "next-auth/react";
 import { Button } from "antd";
-import BasePage from "@/components/BasePage";
+import BasePage from "@ui/pages/BasePage";

-export default function Home() {
+export default function LoginPage() {
  const { data: session } = useSession();

  async function handleSignIn() {
--- a/src/public/fonts/fontawesome/fontawesome_default.html
+++ b/src/public/fonts/fontawesome/fontawesome_default.html
@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="csrf-token" content="PToZdHBuJlI7RhAXKismfQQsMzBUexIDeNwD3_G4ZqDPXlj9Ckqd-5X4">
+<link rel="icon" href="/favicon.ico">
+<link rel="icon" href="/images/favicon/icon.svg" type="image/svg+xml">
+<link rel="apple-touch-icon" href="/images/favicon/apple-touch-icon.png">
+<link rel="manifest" href="/manifest/app.json">
+
+<meta name="theme-color" content="#528DD7">
+
+
+<title>Font Awesome</title>
+<meta id="meta-application-name" name="application-name" content="Font Awesome" />
+<meta id="meta-description" name="description" content="The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options." />
+<meta id="meta-keywords" name="keywords" content="icons, vector icons, svg icons, free icons, icon font, webfont, desktop icons, svg, font awesome, font awesome free, font awesome pro" />
+
+<!-- Schema.org markup for Google+ -->
+<meta id="meta-item-name" itemprop="name" content="Font Awesome" />
+<meta id="meta-item-description" itemprop="description" content="The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options." />
+<meta id="meta-item-image" itemprop="image" content="https://img.fortawesome.com/349cfdf6/fontawesome-open-graph.png" />
+
+<!-- Twitter Card data -->
+<meta id="twt-card" name="twitter:card" content="summary" />
+<meta id="twt-site" name="twitter:site" content="@fontawesome" />
+<meta id="twt-title" name="twitter:title" content="Font Awesome" />
+<meta id="twt-description" name="twitter:description" content="The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options." />
+<meta id="twt-creator" name="twitter:creator" content="@fontawesome" />
+<meta id="twt-image" name="twitter:image" content="https://img.fortawesome.com/349cfdf6/fontawesome-open-graph.png" />
+
+<!-- Open Graph data -->
+<meta id="og-title" property="og:title" content="Font Awesome" />
+<meta id="og-type" property="og:type" content="website" />
+<meta id="og-url" property="og:url" content="https://fontawesome.com" />
+<meta id="og-image" property="og:image" content="https://img.fortawesome.com/349cfdf6/fontawesome-open-graph.png" />
+<meta id="og-description" property="og:description" content="The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options." />
+
+
+    <link
+      rel="stylesheet"
+      data-purpose="Layout StyleSheet"
+      title="Default"
+
+      href="/css/app-eebc29a5e707f565ed420d151441665a.css?vsn=d"
+    >
+    <link
+      rel="stylesheet"
+      data-purpose="Layout StyleSheet"
+      title="Web Awesome"
+disabled
+      href="/css/app-wa-b464d3417b7a8fcc0b8bfe9cf7d4bc92.css?vsn=d"
+    >
+    <link
+      rel="stylesheet"
+disabled
+      href="https://pro.fontawesome.com/releases/v6.0.0-beta3/css/all.css"
+    >
+<script async src="https://www.googletagmanager.com/gtag/js?id=UA-30136587-4"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+
+  gtag('config', 'UA-30136587-4', { cookie_flags: 'max-age=7200;secure;samesite=none' });
+</script>
+
+
+    <link rel="preload" href="/js/settings-445a010757cbad60e82500f2dc6c83dc.js?vsn=d" as="script">
+    <link rel="preload" href="/js/app-8be57055a5918601da69ea599f03aee0.js?vsn=d" as="script">
+
+    <script defer src="/js/settings-445a010757cbad60e82500f2dc6c83dc.js?vsn=d"></script>
+    <script defer src="/js/app-8be57055a5918601da69ea599f03aee0.js?vsn=d"></script>
+<script type="text/javascript">!function(e,t,n){function a(){var e=t.getElementsByTagName("script")[0],n=t.createElement("script");n.type="text/javascript",n.async=!0,n.src="https://beacon-v2.helpscout.net",e.parentNode.insertBefore(n,e)}if(e.Beacon=n=function(t,n,a){e.Beacon.readyQueue.push({method:t,options:n,data:a})},n.readyQueue=[],"complete"===t.readyState)return a();e.attachEvent?e.attachEvent("onload",a):e.addEventListener("load",a,!1)}(window,document,window.Beacon||function(){});</script>
+<script type="text/javascript">
+  window.Beacon('init', '8b4d2c82-4277-4380-9212-e4e7f03c1ea4');
+  window.Beacon('config', {display: {style: 'manual'}})
+</script>
+  </head>
+  <body class="min-vh-100 bg-gray0 gray7 ma0 overflow-x-hidden">
+
+<div id="vue-container">
+</div>
+<div id="modal"></div>
+<div id="shade"></div>
+<script>
+  window.__inline_data__ = [{"data":[{"attributes":{"inserted-at":"2017-08-02T21:36:24","name":"Early Access","percentage-complete":100,"updated-at":"2017-08-02T21:36:24","view-order":1},"id":"1","links":{"self":"/api/product-updates"},"type":"product-update"},{"attributes":{"inserted-at":"2017-08-02T21:36:24","name":"Core Font Awesome 4 Icons Redesigned","percentage-complete":100,"updated-at":"2017-08-02T21:36:24","view-order":2},"id":"2","links":{"self":"/api/product-updates"},"type":"product-update"},{"attributes":{"inserted-at":"2017-08-02T21:36:24","name":"Icons in SVG Format","percentage-complete":100,"updated-at":"2017-12-06T15:32:04","view-order":3},"id":"3","links":{"self":"/api/product-updates"},"type":"product-update"},{"attributes":{"inserted-at":"2018-03-29T14:07:48","name":"Revamped Icon Font Framework","percentage-complete":100,"updated-at":"2018-07-24T14:40:06","view-order":4},"id":"14","links":{"self":"/api/product-updates"},"type":"product-update"},{"attributes":{"inserted-at":"2017-08-02T21:36:24","name":"SVG Icon Framework","percentage-complete":100,"updated-at":"2017-12-06T15:32:16","view-order":5},"id":"4","links":{"self":"/api/product-updates"},"type":"product-update"},{"attributes":{"inserted-at":"2017-08-02T21:36:24","name":"Regular and Light Icon Styles","percentage-complete":100,"updated-at":"2017-08-02T21:36:24","view-order":6},"id":"5","links":{"self":"/api/product-updates"},"type":"product-update"},{"attributes":{"inserted-at":"2017-08-02T21:36:24","name":"Icon Font Ligatures","percentage-complete":100,"updated-at":"2018-07-24T14:43:16","view-order":7},"id":"7","links":{"self":"/api/product-updates"},"type":"product-update"},{"attributes":{"inserted-at":"2017-08-02T21:36:24","name":"Dedicated CDN","percentage-complete":100,"updated-at":"2018-07-24T14:43:27","view-order":8},"id":"10","links":{"self":"/api/product-updates"},"type":"product-update"},{"attributes":{"inserted-at":"2017-08-02T21:36:24","name":"Duotone Colored Icons","percentage-complete":100,"updated-at":"2018-07-24T14:45:51","view-order":9},"id":"6","links":{"self":"/api/product-updates"},"type":"product-update"},{"attributes":{"inserted-at":"2017-08-02T21:36:24","name":"Desktop Icon Subsetter","percentage-complete":100,"updated-at":"2018-07-24T14:45:29","view-order":10},"id":"8","links":{"self":"/api/product-updates"},"type":"product-update"},{"attributes":{"inserted-at":"2017-08-02T21:36:24","name":"Community Voting","percentage-complete":75,"updated-at":"2018-07-24T14:44:56","view-order":11},"id":"11","links":{"self":"/api/product-updates"},"type":"product-update"},{"attributes":{"inserted-at":"2018-03-29T14:07:48","name":"iOS and Android Support","percentage-complete":0,"updated-at":"2018-07-24T14:46:05","view-order":12},"id":"15","links":{"self":"/api/product-updates"},"type":"product-update"},{"attributes":{"inserted-at":"2017-08-02T21:36:24","name":"Desktop Design Plugins","percentage-complete":0,"updated-at":"2018-07-24T14:46:20","view-order":13},"id":"9","links":{"self":"/api/product-updates"},"type":"product-update"}],"jsonapi":{"version":"1.0"}}]
+</script>
+
+    <script src="https://use.fortawesome.com/349cfdf6.js"></script>
+
+    <script defer src="https://m.servedby-buysellads.com/monetization.js"></script>
+    <script defer src="https://js.stripe.com/v3/"></script>
+    <script defer src="https://www.google.com/recaptcha/api.js?render=6Lfwy8YZAAAAAOymsOdsZ7xDAG-TFKW_fij1Wnjg"></script>
+    <script defer src="https://embed.typeform.com/embed.js"></script>
+  </body>
+</html>
--- a/src/public/fonts/fontawesome/index.css
+++ b/src/public/fonts/fontawesome/index.css
--- a/src/public/fonts/fontawesome/license.htm
+++ b/src/public/fonts/fontawesome/license.htm
@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="csrf-token" content="KVk0SCZ2CVA7excpJHEWdT0CIQYhLxMaq-ZxeGh6ZLCnV6Z1zEcRXaY-">
+<link rel="icon" href="/favicon.ico">
+<link rel="icon" href="/images/favicon/icon.svg" type="image/svg+xml">
+<link rel="apple-touch-icon" href="/images/favicon/apple-touch-icon.png">
+<link rel="manifest" href="/manifest/app.json">
+
+<meta name="theme-color" content="#528DD7">
+
+
+<title>Font Awesome</title>
+<meta id="meta-application-name" name="application-name" content="Font Awesome" />
+<meta id="meta-description" name="description" content="The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options." />
+<meta id="meta-keywords" name="keywords" content="icons, vector icons, svg icons, free icons, icon font, webfont, desktop icons, svg, font awesome, font awesome free, font awesome pro" />
+
+<!-- Schema.org markup for Google+ -->
+<meta id="meta-item-name" itemprop="name" content="Font Awesome" />
+<meta id="meta-item-description" itemprop="description" content="The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options." />
+<meta id="meta-item-image" itemprop="image" content="https://img.fortawesome.com/349cfdf6/fontawesome-open-graph.png" />
+
+<!-- Twitter Card data -->
+<meta id="twt-card" name="twitter:card" content="summary" />
+<meta id="twt-site" name="twitter:site" content="@fontawesome" />
+<meta id="twt-title" name="twitter:title" content="Font Awesome" />
+<meta id="twt-description" name="twitter:description" content="The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options." />
+<meta id="twt-creator" name="twitter:creator" content="@fontawesome" />
+<meta id="twt-image" name="twitter:image" content="https://img.fortawesome.com/349cfdf6/fontawesome-open-graph.png" />
+
+<!-- Open Graph data -->
+<meta id="og-title" property="og:title" content="Font Awesome" />
+<meta id="og-type" property="og:type" content="website" />
+<meta id="og-url" property="og:url" content="https://fontawesome.com" />
+<meta id="og-image" property="og:image" content="https://img.fortawesome.com/349cfdf6/fontawesome-open-graph.png" />
+<meta id="og-description" property="og:description" content="The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options." />
+
+
+    <link
+      rel="stylesheet"
+      data-purpose="Layout StyleSheet"
+      title="Default"
+
+      href="/css/app-eebc29a5e707f565ed420d151441665a.css?vsn=d"
+    >
+    <link
+      rel="stylesheet"
+      data-purpose="Layout StyleSheet"
+      title="Web Awesome"
+disabled
+      href="/css/app-wa-b464d3417b7a8fcc0b8bfe9cf7d4bc92.css?vsn=d"
+    >
+    <link
+      rel="stylesheet"
+disabled
+      href="https://pro.fontawesome.com/releases/v6.0.0-beta3/css/all.css"
+    >
+<script async src="https://www.googletagmanager.com/gtag/js?id=UA-30136587-4"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+
+  gtag('config', 'UA-30136587-4', { cookie_flags: 'max-age=7200;secure;samesite=none' });
+</script>
+
+
+    <link rel="preload" href="/js/settings-445a010757cbad60e82500f2dc6c83dc.js?vsn=d" as="script">
+    <link rel="preload" href="/js/app-8be57055a5918601da69ea599f03aee0.js?vsn=d" as="script">
+
+    <script defer src="/js/settings-445a010757cbad60e82500f2dc6c83dc.js?vsn=d"></script>
+    <script defer src="/js/app-8be57055a5918601da69ea599f03aee0.js?vsn=d"></script>
+<script type="text/javascript">!function(e,t,n){function a(){var e=t.getElementsByTagName("script")[0],n=t.createElement("script");n.type="text/javascript",n.async=!0,n.src="https://beacon-v2.helpscout.net",e.parentNode.insertBefore(n,e)}if(e.Beacon=n=function(t,n,a){e.Beacon.readyQueue.push({method:t,options:n,data:a})},n.readyQueue=[],"complete"===t.readyState)return a();e.attachEvent?e.attachEvent("onload",a):e.addEventListener("load",a,!1)}(window,document,window.Beacon||function(){});</script>
+<script type="text/javascript">
+  window.Beacon('init', '8b4d2c82-4277-4380-9212-e4e7f03c1ea4');
+  window.Beacon('config', {display: {style: 'manual'}})
+</script>
+  </head>
+  <body class="min-vh-100 bg-gray0 gray7 ma0 overflow-x-hidden">
+
+<div id="vue-container">
+</div>
+<div id="modal"></div>
+<div id="shade"></div>
+<script>
+  window.__inline_data__ = [{"data":[{"attributes":{"inserted-at":"2017-08-02T21:36:24","name":"Early Access","percentage-complete":100,"updated-at":"2017-08-02T21:36:24","view-order":1},"id":"1","links":{"self":"/api/product-updates"},"type":"product-update"},{"attributes":{"inserted-at":"2017-08-02T21:36:24","name":"Core Font Awesome 4 Icons Redesigned","percentage-complete":100,"updated-at":"2017-08-02T21:36:24","view-order":2},"id":"2","links":{"self":"/api/product-updates"},"type":"product-update"},{"attributes":{"inserted-at":"2017-08-02T21:36:24","name":"Icons in SVG Format","percentage-complete":100,"updated-at":"2017-12-06T15:32:04","view-order":3},"id":"3","links":{"self":"/api/product-updates"},"type":"product-update"},{"attributes":{"inserted-at":"2018-03-29T14:07:48","name":"Revamped Icon Font Framework","percentage-complete":100,"updated-at":"2018-07-24T14:40:06","view-order":4},"id":"14","links":{"self":"/api/product-updates"},"type":"product-update"},{"attributes":{"inserted-at":"2017-08-02T21:36:24","name":"SVG Icon Framework","percentage-complete":100,"updated-at":"2017-12-06T15:32:16","view-order":5},"id":"4","links":{"self":"/api/product-updates"},"type":"product-update"},{"attributes":{"inserted-at":"2017-08-02T21:36:24","name":"Regular and Light Icon Styles","percentage-complete":100,"updated-at":"2017-08-02T21:36:24","view-order":6},"id":"5","links":{"self":"/api/product-updates"},"type":"product-update"},{"attributes":{"inserted-at":"2017-08-02T21:36:24","name":"Icon Font Ligatures","percentage-complete":100,"updated-at":"2018-07-24T14:43:16","view-order":7},"id":"7","links":{"self":"/api/product-updates"},"type":"product-update"},{"attributes":{"inserted-at":"2017-08-02T21:36:24","name":"Dedicated CDN","percentage-complete":100,"updated-at":"2018-07-24T14:43:27","view-order":8},"id":"10","links":{"self":"/api/product-updates"},"type":"product-update"},{"attributes":{"inserted-at":"2017-08-02T21:36:24","name":"Duotone Colored Icons","percentage-complete":100,"updated-at":"2018-07-24T14:45:51","view-order":9},"id":"6","links":{"self":"/api/product-updates"},"type":"product-update"},{"attributes":{"inserted-at":"2017-08-02T21:36:24","name":"Desktop Icon Subsetter","percentage-complete":100,"updated-at":"2018-07-24T14:45:29","view-order":10},"id":"8","links":{"self":"/api/product-updates"},"type":"product-update"},{"attributes":{"inserted-at":"2017-08-02T21:36:24","name":"Community Voting","percentage-complete":75,"updated-at":"2018-07-24T14:44:56","view-order":11},"id":"11","links":{"self":"/api/product-updates"},"type":"product-update"},{"attributes":{"inserted-at":"2018-03-29T14:07:48","name":"iOS and Android Support","percentage-complete":0,"updated-at":"2018-07-24T14:46:05","view-order":12},"id":"15","links":{"self":"/api/product-updates"},"type":"product-update"},{"attributes":{"inserted-at":"2017-08-02T21:36:24","name":"Desktop Design Plugins","percentage-complete":0,"updated-at":"2018-07-24T14:46:20","view-order":13},"id":"9","links":{"self":"/api/product-updates"},"type":"product-update"}],"jsonapi":{"version":"1.0"}}]
+</script>
+
+    <script src="https://use.fortawesome.com/349cfdf6.js"></script>
+
+    <script defer src="https://m.servedby-buysellads.com/monetization.js"></script>
+    <script defer src="https://js.stripe.com/v3/"></script>
+    <script defer src="https://www.google.com/recaptcha/api.js?render=6Lfwy8YZAAAAAOymsOdsZ7xDAG-TFKW_fij1Wnjg"></script>
+    <script defer src="https://embed.typeform.com/embed.js"></script>
+  </body>
+</html>
--- a/src/public/fonts/fontawesome/webfonts/fa-brands-400.ttf
+++ b/src/public/fonts/fontawesome/webfonts/fa-brands-400.ttf
--- a/src/public/fonts/fontawesome/webfonts/fa-brands-400.woff2
+++ b/src/public/fonts/fontawesome/webfonts/fa-brands-400.woff2
--- a/src/public/fonts/fontawesome/webfonts/fa-duotone-900.ttf
+++ b/src/public/fonts/fontawesome/webfonts/fa-duotone-900.ttf
--- a/src/public/fonts/fontawesome/webfonts/fa-duotone-900.woff2
+++ b/src/public/fonts/fontawesome/webfonts/fa-duotone-900.woff2
--- a/src/public/fonts/fontawesome/webfonts/fa-light-300.ttf
+++ b/src/public/fonts/fontawesome/webfonts/fa-light-300.ttf
--- a/src/public/fonts/fontawesome/webfonts/fa-light-300.woff2
+++ b/src/public/fonts/fontawesome/webfonts/fa-light-300.woff2
--- a/src/public/fonts/fontawesome/webfonts/fa-regular-400.ttf
+++ b/src/public/fonts/fontawesome/webfonts/fa-regular-400.ttf
--- a/src/public/fonts/fontawesome/webfonts/fa-regular-400.woff2
+++ b/src/public/fonts/fontawesome/webfonts/fa-regular-400.woff2
--- a/src/public/fonts/fontawesome/webfonts/fa-solid-900.ttf
+++ b/src/public/fonts/fontawesome/webfonts/fa-solid-900.ttf
--- a/src/public/fonts/fontawesome/webfonts/fa-solid-900.woff2
+++ b/src/public/fonts/fontawesome/webfonts/fa-solid-900.woff2
--- a/src/public/fonts/fontawesome/webfonts/fa-thin-100.ttf
+++ b/src/public/fonts/fontawesome/webfonts/fa-thin-100.ttf
--- a/src/public/fonts/fontawesome/webfonts/fa-thin-100.woff2
+++ b/src/public/fonts/fontawesome/webfonts/fa-thin-100.woff2
--- a/src/public/fonts/fontawesome/webfonts/fa-v4compatibility.ttf
+++ b/src/public/fonts/fontawesome/webfonts/fa-v4compatibility.ttf
--- a/src/public/fonts/fontawesome/webfonts/fa-v4compatibility.woff2
+++ b/src/public/fonts/fontawesome/webfonts/fa-v4compatibility.woff2
--- a/src/public/fonts/fontawesome/webfonts/fontawesome_default.html
+++ b/src/public/fonts/fontawesome/webfonts/fontawesome_default.html
@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="csrf-token" content="Pj1rBFgAejQtQBh3ATIPEAVQICVtEiMoyQ2Pls6PytYZckc_a2vl8Gri">
+<link rel="icon" href="/favicon.ico">
+<link rel="icon" href="/images/favicon/icon.svg" type="image/svg+xml">
+<link rel="apple-touch-icon" href="/images/favicon/apple-touch-icon.png">
+<link rel="manifest" href="/manifest/app.json">
+
+<meta name="theme-color" content="#528DD7">
+
+
+<title>Font Awesome</title>
+<meta id="meta-application-name" name="application-name" content="Font Awesome" />
+<meta id="meta-description" name="description" content="The internet&#39;s icon library + toolkit. Used by millions of designers, devs, &amp; content creators. Open-source. Always free. Always awesome." />
+<meta id="meta-keywords" name="keywords" content="icons,vector icons,svg icons,free icons,icon font,webfont,desktop icons,svg,font awesome,font awesome free,font awesome pro" />
+
+<!-- Schema.org markup for Google+ -->
+<meta id="meta-item-name" itemprop="name" content="Font Awesome" />
+<meta id="meta-item-description" itemprop="description" content="The internet&#39;s icon library + toolkit. Used by millions of designers, devs, &amp; content creators. Open-source. Always free. Always awesome." />
+<meta id="meta-item-image" itemprop="image" content="https://img.fortawesome.com/1ce05b4b/open-graph-general.png" />
+<link rel="canonical" href="https://fontawesome.com" />
+
+<!-- Twitter Card data -->
+<meta id="twt-card" name="twitter:card" content="summary" />
+<meta id="twt-site" name="twitter:site" content="@fontawesome" />
+<meta id="twt-title" name="twitter:title" content="Font Awesome" />
+<meta id="twt-description" name="twitter:description" content="The internet&#39;s icon library + toolkit. Used by millions of designers, devs, &amp; content creators. Open-source. Always free. Always awesome." />
+<meta id="twt-creator" name="twitter:creator" content="@fontawesome" />
+<meta id="twt-image" name="twitter:image" content="https://img.fortawesome.com/1ce05b4b/open-graph-general.png" />
+
+<!-- Open Graph data -->
+<meta id="og-title" property="og:title" content="Font Awesome" />
+
+<meta id="og-type" property="og:type" content="website" />
+<meta id="og-url" property="og:url" content="https://fontawesome.com" />
+<meta id="og-image" property="og:image" content="https://img.fortawesome.com/1ce05b4b/open-graph-general.png" />
+<meta id="og-description" property="og:description" content="The internet&#39;s icon library + toolkit. Used by millions of designers, devs, &amp; content creators. Open-source. Always free. Always awesome." />
+
+
+    <link
+      rel="stylesheet"
+      data-purpose="Layout StyleSheet"
+      title="Default"
+disabled
+      href="/css/app-af6a05f42b013986b481566363f0186f.css?vsn=d"
+    >
+    <link
+      rel="stylesheet"
+      data-purpose="Layout StyleSheet"
+      title="Web Awesome"
+
+      href="/css/app-wa-df1bd4d47fc6bf066625b27b61ccafe7.css?vsn=d"
+    >
+
+      <link
+        rel="stylesheet"
+
+        href="https://site-assets.fontawesome.com/releases/v6.3.0/css/all.css"
+      >
+
+      <link
+        rel="stylesheet"
+
+        href="https://site-assets.fontawesome.com/releases/v6.3.0/css/sharp-solid.css"
+      >
+
+      <link
+        rel="stylesheet"
+
+        href="https://site-assets.fontawesome.com/releases/v6.3.0/css/sharp-regular.css"
+      >
+
+<script async src="https://www.googletagmanager.com/gtag/js?id=UA-30136587-4"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+
+  gtag('config', 'UA-30136587-4', { cookie_flags: 'max-age=7200;secure;samesite=none' });
+</script>
+
+
+      <script src="https://use.fortawesome.com/1ce05b4b.js"></script>
+
+    <link rel="preload" href="/js/settings-c4b006efee6b5b6cce17b9d124b7ef4f.js?vsn=d" as="script">
+    <link rel="preload" href="/js/app-b698e463725a27511e82a5f45742e51c.js?vsn=d" as="script">
+
+    <script defer src="/js/settings-c4b006efee6b5b6cce17b9d124b7ef4f.js?vsn=d"></script>
+    <script defer src="/js/app-b698e463725a27511e82a5f45742e51c.js?vsn=d"></script>
+<script type="text/javascript">!function(e,t,n){function a(){var e=t.getElementsByTagName("script")[0],n=t.createElement("script");n.type="text/javascript",n.async=!0,n.src="https://beacon-v2.helpscout.net",e.parentNode.insertBefore(n,e)}if(e.Beacon=n=function(t,n,a){e.Beacon.readyQueue.push({method:t,options:n,data:a})},n.readyQueue=[],"complete"===t.readyState)return a();e.attachEvent?e.attachEvent("onload",a):e.addEventListener("load",a,!1)}(window,document,window.Beacon||function(){});</script>
+<script type="text/javascript">
+  window.Beacon('init', '8b4d2c82-4277-4380-9212-e4e7f03c1ea4');
+  window.Beacon('config', {display: {style: 'manual'}})
+</script>
+  </head>
+  <body>
+
+
+
+<div id="vue-container">
+</div>
+<div id="modal"></div>
+<div id="shade"></div>
+<script>
+  window.__inline_data__ = []
+</script>
+
+    <script src="https://use.fortawesome.com/349cfdf6.js"></script>
+
+    <script defer src="https://js.stripe.com/v3/"></script>
+    <script defer src="https://www.google.com/recaptcha/api.js?render=6Lfwy8YZAAAAAOymsOdsZ7xDAG-TFKW_fij1Wnjg"></script>
+  </body>
+</html>
--- a/src/public/fonts/fontawesome/webfonts/license.htm
+++ b/src/public/fonts/fontawesome/webfonts/license.htm
@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="csrf-token" content="ABcuYTM2Tg0jJwh3ITkvOQQAPCEeOWYjUb_RlQzFWjP-XfasB0MVQxQM">
+<link rel="icon" href="/favicon.ico">
+<link rel="icon" href="/images/favicon/icon.svg" type="image/svg+xml">
+<link rel="apple-touch-icon" href="/images/favicon/apple-touch-icon.png">
+<link rel="manifest" href="/manifest/app.json">
+
+<meta name="theme-color" content="#528DD7">
+
+
+<title>Pro License | Font Awesome</title>
+<meta id="meta-application-name" name="application-name" content="Pro License | Font Awesome" />
+<meta id="meta-description" name="description" content="License information for Font Awesome Pro." />
+<meta id="meta-keywords" name="keywords" content="icons,vector icons,svg icons,free icons,icon font,webfont,desktop icons,svg,font awesome,font awesome free,font awesome pro" />
+
+<!-- Schema.org markup for Google+ -->
+<meta id="meta-item-name" itemprop="name" content="Pro License | Font Awesome" />
+<meta id="meta-item-description" itemprop="description" content="License information for Font Awesome Pro." />
+<meta id="meta-item-image" itemprop="image" content="https://img.fortawesome.com/1ce05b4b/open-graph-license-pro.svg" />
+<link rel="canonical" href="https://fontawesome.com" />
+
+<!-- Twitter Card data -->
+<meta id="twt-card" name="twitter:card" content="summary" />
+<meta id="twt-site" name="twitter:site" content="@fontawesome" />
+<meta id="twt-title" name="twitter:title" content="Pro License | Font Awesome" />
+<meta id="twt-description" name="twitter:description" content="License information for Font Awesome Pro." />
+<meta id="twt-creator" name="twitter:creator" content="@fontawesome" />
+<meta id="twt-image" name="twitter:image" content="https://img.fortawesome.com/1ce05b4b/open-graph-license-pro.svg" />
+
+<!-- Open Graph data -->
+<meta id="og-title" property="og:title" content="Pro License | Font Awesome" />
+
+<meta id="og-type" property="og:type" content="website" />
+<meta id="og-url" property="og:url" content="https://fontawesome.com" />
+<meta id="og-image" property="og:image" content="https://img.fortawesome.com/1ce05b4b/open-graph-license-pro.svg" />
+<meta id="og-description" property="og:description" content="License information for Font Awesome Pro." />
+
+
+    <link
+      rel="stylesheet"
+      data-purpose="Layout StyleSheet"
+      title="Default"
+disabled
+      href="/css/app-af6a05f42b013986b481566363f0186f.css?vsn=d"
+    >
+    <link
+      rel="stylesheet"
+      data-purpose="Layout StyleSheet"
+      title="Web Awesome"
+
+      href="/css/app-wa-df1bd4d47fc6bf066625b27b61ccafe7.css?vsn=d"
+    >
+
+      <link
+        rel="stylesheet"
+
+        href="https://site-assets.fontawesome.com/releases/v6.3.0/css/all.css"
+      >
+
+      <link
+        rel="stylesheet"
+
+        href="https://site-assets.fontawesome.com/releases/v6.3.0/css/sharp-solid.css"
+      >
+
+      <link
+        rel="stylesheet"
+
+        href="https://site-assets.fontawesome.com/releases/v6.3.0/css/sharp-regular.css"
+      >
+
+<script async src="https://www.googletagmanager.com/gtag/js?id=UA-30136587-4"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+
+  gtag('config', 'UA-30136587-4', { cookie_flags: 'max-age=7200;secure;samesite=none' });
+</script>
+
+
+      <script src="https://use.fortawesome.com/1ce05b4b.js"></script>
+
+    <link rel="preload" href="/js/settings-c4b006efee6b5b6cce17b9d124b7ef4f.js?vsn=d" as="script">
+    <link rel="preload" href="/js/app-b698e463725a27511e82a5f45742e51c.js?vsn=d" as="script">
+
+    <script defer src="/js/settings-c4b006efee6b5b6cce17b9d124b7ef4f.js?vsn=d"></script>
+    <script defer src="/js/app-b698e463725a27511e82a5f45742e51c.js?vsn=d"></script>
+<script type="text/javascript">!function(e,t,n){function a(){var e=t.getElementsByTagName("script")[0],n=t.createElement("script");n.type="text/javascript",n.async=!0,n.src="https://beacon-v2.helpscout.net",e.parentNode.insertBefore(n,e)}if(e.Beacon=n=function(t,n,a){e.Beacon.readyQueue.push({method:t,options:n,data:a})},n.readyQueue=[],"complete"===t.readyState)return a();e.attachEvent?e.attachEvent("onload",a):e.addEventListener("load",a,!1)}(window,document,window.Beacon||function(){});</script>
+<script type="text/javascript">
+  window.Beacon('init', '8b4d2c82-4277-4380-9212-e4e7f03c1ea4');
+  window.Beacon('config', {display: {style: 'manual'}})
+</script>
+  </head>
+  <body>
+
+
+
+<div id="vue-container">
+</div>
+<div id="modal"></div>
+<div id="shade"></div>
+<script>
+  window.__inline_data__ = []
+</script>
+
+    <script src="https://use.fortawesome.com/349cfdf6.js"></script>
+
+    <script defer src="https://js.stripe.com/v3/"></script>
+    <script defer src="https://www.google.com/recaptcha/api.js?render=6Lfwy8YZAAAAAOymsOdsZ7xDAG-TFKW_fij1Wnjg"></script>
+  </body>
+</html>
--- a/src/public/tor-onion.svg
+++ b/src/public/tor-onion.svg
@ -0,0 +1,18 @@
+<svg width="32" height="32" version="1.1" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+<defs>
+        <linearGradient x1="50%" y1="100%" x2="50%" y2="0%" id="linearGradient-1">
+            <stop stop-color="#420C5D" offset="0%"></stop>
+            <stop stop-color="#951AD1" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+ <g transform="translate(-58.12 -303.3)" fill="url(#linearGradient-1)" fill-rule="evenodd">
+  <path d="m77.15 303.3c-1.608 1.868-0.09027 2.972-0.9891 4.84 1.514-2.129 5.034-2.862 7.328-3.643-3.051 2.72-5.457 6.326-8.489 9.009l-1.975-0.8374c-0.4647-4.514-1.736-4.705 4.125-9.369z"
+        fill-rule="evenodd" />
+  <path d="m74.04 313.1 2.932 0.9454c-0.615 2.034 0.3559 2.791 0.9472 3.123 1.324 0.7332 2.602 1.49 3.619 2.412 1.916 1.75 3.004 4.21 3.004 6.812 0 2.578-1.183 5.061-3.169 6.717-1.868 1.561-4.446 2.223-6.953 2.223-1.561 0-2.956-0.0708-4.47-0.5677-3.453-1.159-6.031-4.115-6.244-7.663-0.1893-2.767 0.4257-4.872 2.578-7.072 1.111-1.159 2.563-2.749 4.1-3.813 0.757-0.5204 1.119-1.191-0.4183-3.958l1.28-1.076 2.795 1.918-2.352-0.3007c0.1656 0.2366 1.189 0.7706 1.284 1.078 0.2128 0.8751-0.1911 1.771-0.3804 2.149-0.9696 1.75-1.86 2.275-3.066 3.268-2.129 1.75-4.27 2.836-4.01 7.637 0.1183 2.365 1.433 5.295 4.2 6.643 1.561 0.757 2.859 1.189 4.68 1.284 1.632 0.071 4.754-0.8988 6.457-2.318 1.821-1.514 2.838-3.808 2.838-6.149 0-2.365-0.9461-4.612-2.72-6.197-1.017-0.9223-2.696-2.034-3.737-2.625-1.041-0.5912-2.782-2.06-2.356-3.645z" />
+  <path d="m73.41 316.6c-0.186 1.088-0.4177 3.117-0.8909 3.917-0.3293 0.5488-0.4126 0.8101-0.7846 1.094-1.09 1.535-1.45 1.761-2.132 4.552-0.1447 0.5914-0.3832 1.516-0.2591 2.107 0.372 1.703 0.6612 2.874 1.316 4.103 0 0 0.1271 0.1217 0.1271 0.169 0.6821 0.9225 0.6264 1.05 2.665 2.246l-0.06204 0.3313c-1.55-0.4729-2.604-0.9591-3.41-2.024 0-0.0236-0.1513-0.1558-0.1513-0.1558-0.868-1.135-1.753-2.788-2.021-4.546-0.1447-0.7097-0.0769-1.341 0.08833-2.075 0.7026-2.885 1.415-4.093 2.744-5.543 0.3514-0.2601 0.6704-0.6741 1.001-1.092 0.4859-0.6764 1.462-2.841 1.814-4.189z" />
+  <path d="m74.09 318.6c0.0237 1.04 0.0078 3.036 0.3389 3.796 0.0945 0.2599 0.3274 1.414 0.9422 2.794 0.4258 0.96 0.5418 1.933 0.6128 2.193 0.2838 1.14-0.4002 3.086-0.8734 4.906-0.2364 0.98-0.6051 1.773-1.371 2.412l0.2796 0.3593c0.5204-0.02 1.954-1.096 2.403-2.416 0.757-2.24 1.328-3.317 0.9729-5.797-0.0473-0.2402-0.2094-1.134-0.6588-2.014-0.6622-1.34-1.474-2.614-1.592-2.874-0.213-0.4198-1.007-2.119-1.054-3.359z" />
+  <path d="m74.88 313.9 0.9727 0.4962c-0.09145 0.6403 0.04572 2.059 0.686 2.424 2.836 1.761 5.512 3.683 6.565 5.604 3.751 6.771-2.63 13.04-8.143 12.44 2.996-2.219 4.428-6.583 3.307-11.55-0.4574-1.944-1.729-3.893-2.987-5.883-0.545-0.9768-0.3547-2.188-0.4006-3.538z"
+        fill-rule="evenodd" />
+  <rect x="73.07" y="312.8" width="1" height="22" />
+ </g>
+</svg>
--- a/src/public/vps.29373866.svg
+++ b/src/public/vps.29373866.svg
@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 62 (91390) - https://sketch.com -->
+    <title>vps</title>
+    <desc>Created with Sketch.</desc>
+    <g id="vps" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M33,26 L33,31 C33,32.6568542 31.6568542,34 30,34 L6,34 C4.34314575,34 3,32.6568542 3,31 L3,26 L33,26 Z M30,29 L6,29 L6,31 L30,31 L30,29 Z M33,15 L33,23 L3,23 L3,15 L33,15 Z M30,18 L6,18 L6,20 L30,20 L30,18 Z M30,4 C31.6568542,4 33,5.34314575 33,7 L33,12 L3,12 L3,7 C3,5.34314575 4.34314575,4 6,4 L30,4 Z M30,7 L6,7 L6,9 L30,9 L30,7 Z" fill="#991b1b"></path>
+    </g>
+</svg>
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@ -1,13 +1,28 @@
@tailwind base;
+
+@layer base {
+
+  button:not(:not(.ant-btn-primary)),
+  [type='button']:not(:not(.ant-btn-primary)),
+  [type='reset']:not(:not(.ant-btn-primary)),
+  [type='submit']:not(:not(.ant-btn-primary))
+  {
+    background-color: var(--primary-color);
+  }
+
+}
+
@tailwind components;
@tailwind utilities;

 :root {
  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
+  --background-rgb: 249, 250, 251;
+  --primary-color: theme('colors.red.800');
 }

 body {
  color: rgb(var(--foreground-rgb));
+  background-color: rgb(var(--background-rgb));
 }
+
--- a/src/tailwind.config.ts
+++ b/src/tailwind.config.ts
@ -1,13 +1,20 @@
 import type { Config } from 'tailwindcss'

 const config: Config = {
+  darkMode: 'class',
+  important: true,
  content: [
+    './ui/**/*.{js,ts,jsx,tsx,mdx}',
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}'
  ],
  theme: {
    extend: {
+      screens: {
+        'xs': '375px',
+        '2xl': '1440px',
+      },
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
@ -16,11 +23,35 @@ const config: Config = {
      colors: {
        primary: {
          DEFAULT: '#88161a'
-        }
+        },
+        transparent: 'transparent',
+      },
+      fontSize: {
+        '3xs': '.5rem',
+        '2xs': '.625rem',
+        'sm/2': '.8125rem',
+        'md': '.9375rem',
+      },
+      fontWeight: {
+        'thin': '100',
+        'light': '300',
+        'normal': '400',
+        'medium': '500',
+        'semibold': '600',
+        'bold': '700',
+        'extrabold': '800',
+        'black': '900',
+      },
+      zIndex: {
+        '-100': '100',
+        '-1000': '1000',
+        '-10000': '10000',
+        '100': '100',
+        '1000': '1000',
+        '10000': '10000',
      }
    },
  },
-  darkMode: "class",
  plugins: [],
 }
 export default config
--- a/src/tsconfig.json
+++ b/src/tsconfig.json
@ -1,23 +1,14 @@
 {
+  "extends": "tsconfig/nextjs.json",
  "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"],
-      "@lib/*": ["./lib*"],
+      "@lib/*": ["./lib/*"],
+      "@ui/*": ["./ui/*"]
    }
  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
 }
--- a/src/turbo.json
+++ b/src/turbo.json
@ -1,9 +0,0 @@
-{
-  "$schema": "https://turbo.build/schema.json",
-  "pipeline": {
-    "build": {
-      "outputs": [".next/**", "!.next/cache/**"]
-    },
-    "lint": {}
-  }
-}
--- a/src/ui/SmartModal.tsx
+++ b/src/ui/SmartModal.tsx
@ -0,0 +1,33 @@
+import React from "react";
+import { Modal, type ModalProps } from "antd";
+
+export type SmartModalProps = ModalProps
+
+export type SmartModalRef = {
+  open: () => void
+  close: () => void
+  toggle: () => void
+}
+
+const SmartModal = React.forwardRef<SmartModalRef, SmartModalProps>((props, ref) => {
+
+  const [ visible, setVisible ] = React.useState<boolean>(false)
+
+  React.useImperativeHandle(ref, () => ({
+    open: () => setVisible(true),
+    close: () => setVisible(false),
+    toggle: () => setVisible(!visible)
+  }))
+
+  return (
+     <Modal
+        onCancel={() => setVisible(false)}
+        onOk={() => setVisible(!visible)}
+        {...props}
+        open={visible}
+     />
+  )
+
+})
+
+export default SmartModal
--- a/src/ui/pages/BasePage.tsx
+++ b/src/ui/pages/BasePage.tsx
@ -0,0 +1,32 @@
+import React from "react";
+import { twMerge } from "tailwind-merge";
+import clsx from "clsx";
+import PageHeader from "@ui/pages/PageHeader";
+import PageFooter from "@ui/pages/PageFooter";
+
+export type BasePageProps = {
+  rootClassName?: string
+  className?: string
+  children: React.ReactNode
+}
+
+export default function BasePage(props: BasePageProps): React.ReactElement {
+  return (
+     <div className={clsx(
+        'w-full min-h-screen flex justify-center',
+        'px-2 md:px-6 py-2'
+     )}>
+       <div className={twMerge(
+          'w-full mx-auto max-w-3xl',
+          'space-y-3.5',
+          props.rootClassName
+       )}>
+         <PageHeader />
+         <main className={twMerge('py-2', props.className)}>
+           {props.children}
+         </main>
+         <PageFooter />
+       </div>
+     </div>
+  )
+}
--- a/src/ui/pages/PageFooter.tsx
+++ b/src/ui/pages/PageFooter.tsx
@ -0,0 +1,25 @@
+import Link from "next/link";
+import { ReactHTMLProps } from "@lib/typings";
+
+export type PageFooterProps = {}
+
+export default function PageFooter(props: PageFooterProps) {
+  return (
+     <footer className={'flex items-center justify-center'}>
+       <span className={'text-center m-10 text-gray-300 text-xs'}>
+         Made by
+       <Link
+          href={'https://github.com/shahradelahi'}
+          title={'Find me on Github'}
+          className={'px-1 font-medium'}
+       >
+         Shahrad Elahi
+       </Link>
+       </span>
+     </footer>
+  )
+}
+
+function DotDivider(props: ReactHTMLProps<HTMLSpanElement>) {
+  return <span {...props}> · </span>
+}
--- a/src/ui/pages/PageHeader.tsx
+++ b/src/ui/pages/PageHeader.tsx
@ -0,0 +1,36 @@
+import Image from "next/image";
+import Link from "next/link";
+
+export type PageHeaderProps = {}
+
+export default function PageHeader(props: PageHeaderProps) {
+  return (
+     <header className={'w-full py-3 px-2'}>
+       <nav className={'w-full flex items-center justify-between'}>
+
+         <div className={'flex items-center gap-x-2 text-3xl font-medium'}>
+           <Image
+              src={'/logo.png'}
+              alt={'WireAdmin'}
+              width={40}
+              height={40}
+           />
+           <h1> WireAdmin </h1>
+         </div>
+
+         <div className={'flex items-center gap-x-2'}>
+           <Link
+              href={'https://github.com/shahradelahi/tsetmc-client'}
+              title={'Giv me a star on Github'}
+           >
+             <img
+                src={'https://img.shields.io/github/stars/shahradelahi/tsetmc-client.svg?style=social&label=Star'}
+                alt={'Giv me a star on Github'}
+             />
+           </Link>
+         </div>
+
+       </nav>
+     </header>
+  )
+}
--- a/src/ui/pages/PageRouter.tsx
+++ b/src/ui/pages/PageRouter.tsx
@ -0,0 +1,38 @@
+import { LeastOne, ReactHTMLProps } from "@lib/typings";
+import React from "react";
+import { twMerge } from "tailwind-merge";
+import { Breadcrumb } from "antd";
+import { HomeOutlined } from "@ant-design/icons";
+
+export type PageRouterProps = ReactHTMLProps<HTMLDivElement> & LeastOne<{
+  children: React.ReactNode
+  route: RouteItem[]
+}>
+
+type RouteItem = {
+  href?: string
+  title: React.ReactNode
+}
+
+export default function PageRouter(props: PageRouterProps) {
+  const { children, route, className, ...rest } = props
+  return (
+     <div {...rest} className={twMerge('py-3 px-2', className)}>
+       {route && route.length > 0 && (
+          <Breadcrumb items={[
+            {
+              href: '/',
+              title: (
+                 <>
+                   <HomeOutlined />
+                   <span>Home</span>
+                 </>
+              ),
+            },
+            ...route
+          ]} />
+       )}
+       {children}
+     </div>
+  )
+}