From a751d6cdd7d24c849c271f4e1cd10e01a995927e Mon Sep 17 00:00:00 2001
From: Tom Jeannesson <tomjeannesson@gmail.com>
Date: Sun, 15 Oct 2023 00:41:28 +0200
Subject: [PATCH] feat(servers-&&-keys): basic interface

---
 desktop-app/package.json                      |   3 +
 .../api/exchangeAccounts/exchangeAccount.ts   |   4 +-
 desktop-app/renderer/api/key/key.ts           |  43 ++++
 desktop-app/renderer/api/request.ts           |  15 +-
 desktop-app/renderer/api/spaces/spaces.ts     |  27 +++
 .../renderer/components/custom/copyButton.tsx |  52 +++++
 .../components/custom/headerPopover.tsx       | 117 +++++++---
 .../components/custom/settingsButton.tsx      |  21 ++
 .../renderer/components/layout/breadcrumb.tsx | 176 ++++++++-------
 .../components/layout/contextHeader.tsx       |  13 +-
 desktop-app/renderer/components/ui/badge.tsx  |  36 +++
 .../renderer/components/ui/checkbox.tsx       |  30 +++
 .../renderer/components/ui/hover-card.tsx     |  29 +++
 desktop-app/renderer/components/ui/switch.tsx |  29 +++
 desktop-app/renderer/lib/localStorage.ts      |  47 ++--
 desktop-app/renderer/lib/queryParams.ts       |   1 -
 .../renderer/pages/exchangeAccounts/index.tsx |   7 +-
 .../renderer/pages/keys/[slug]/index.tsx      |  25 +++
 .../pages/servers/[slug]/adminFooter.tsx      | 156 +++++++++++++
 .../renderer/pages/servers/[slug]/index.tsx   |  30 ++-
 .../pages/servers/[slug]/selectedAPIKey.tsx   | 208 ++++++++++++++++++
 .../pages/servers/[slug]/selectedServer.tsx   | 122 ++++++++++
 desktop-app/renderer/pages/servers/index.tsx  |  24 +-
 desktop-app/renderer/pages/settings/index.tsx |   9 +
 .../renderer/pages/spaces/[name]/index.tsx    |  21 +-
 desktop-app/renderer/pages/spaces/index.tsx   |  48 ++--
 desktop-app/yarn.lock                         |  45 ++++
 27 files changed, 1167 insertions(+), 171 deletions(-)
 create mode 100644 desktop-app/renderer/api/key/key.ts
 create mode 100644 desktop-app/renderer/api/spaces/spaces.ts
 create mode 100644 desktop-app/renderer/components/custom/copyButton.tsx
 create mode 100644 desktop-app/renderer/components/custom/settingsButton.tsx
 create mode 100644 desktop-app/renderer/components/ui/badge.tsx
 create mode 100644 desktop-app/renderer/components/ui/checkbox.tsx
 create mode 100644 desktop-app/renderer/components/ui/hover-card.tsx
 create mode 100644 desktop-app/renderer/components/ui/switch.tsx
 create mode 100644 desktop-app/renderer/pages/keys/[slug]/index.tsx
 create mode 100644 desktop-app/renderer/pages/servers/[slug]/adminFooter.tsx
 create mode 100644 desktop-app/renderer/pages/servers/[slug]/selectedAPIKey.tsx
 create mode 100644 desktop-app/renderer/pages/servers/[slug]/selectedServer.tsx
 create mode 100644 desktop-app/renderer/pages/settings/index.tsx

diff --git a/desktop-app/package.json b/desktop-app/package.json
index b4052f17..f789880f 100644
--- a/desktop-app/package.json
+++ b/desktop-app/package.json
@@ -15,8 +15,10 @@
   "dependencies": {
     "@hookform/resolvers": "^3.3.0",
     "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.5",
+    "@radix-ui/react-hover-card": "^1.0.7",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.6",
@@ -25,6 +27,7 @@
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.4",
     "@radix-ui/react-tooltip": "^1.0.6",
diff --git a/desktop-app/renderer/api/exchangeAccounts/exchangeAccount.ts b/desktop-app/renderer/api/exchangeAccounts/exchangeAccount.ts
index 2211e339..057f5c46 100644
--- a/desktop-app/renderer/api/exchangeAccounts/exchangeAccount.ts
+++ b/desktop-app/renderer/api/exchangeAccounts/exchangeAccount.ts
@@ -9,14 +9,14 @@ export interface ExchangeAccount {
   testing: boolean
 }
 
-export async function list(
+export async function listExchangeAccount(
   searchParams: ReturnType<typeof useSearchParams>
 ): Promise<AxiosResponse<ExchangeAccount[]>> {
   const response = await request(searchParams, 'GET', '/api/exchange_account/')
   return response as AxiosResponse<ExchangeAccount[]>
 }
 
-export async function get(
+export async function getExchangeAccount(
   searchParams: ReturnType<typeof useSearchParams>,
   id: string
 ): Promise<AxiosResponse<ExchangeAccount>> {
diff --git a/desktop-app/renderer/api/key/key.ts b/desktop-app/renderer/api/key/key.ts
new file mode 100644
index 00000000..b7e809f7
--- /dev/null
+++ b/desktop-app/renderer/api/key/key.ts
@@ -0,0 +1,43 @@
+import { request } from 'api/request'
+import { AxiosResponse } from 'axios'
+import { useSearchParams } from 'next/navigation'
+
+export interface Key {
+  name: string
+  prefix: string
+  permissions: string[]
+  is_master_key: boolean
+  revoked: boolean
+  description: string
+}
+
+export async function getKey(
+  searchParams: ReturnType<typeof useSearchParams>,
+  id: string
+): Promise<AxiosResponse<Key>> {
+  const response = await request(searchParams, 'GET', `/api/key/${id}/`)
+  return response as AxiosResponse<Key>
+}
+export async function listKey(
+  searchParams: ReturnType<typeof useSearchParams>,
+  space: string | null = null
+): Promise<AxiosResponse<Key[]>> {
+  const response = await request(
+    searchParams,
+    'GET',
+    space ? `/api/key/?space=${space}` : '/api/key/'
+  )
+  return response as AxiosResponse<Key[]>
+}
+
+export async function createKey(
+  searchParams: ReturnType<typeof useSearchParams>,
+  name: string,
+  description: string
+): Promise<AxiosResponse<{ key: string }>> {
+  const response = await request(searchParams, 'POST', '/api/key/', {
+    name,
+    description
+  })
+  return response as AxiosResponse<{ key: string }>
+}
diff --git a/desktop-app/renderer/api/request.ts b/desktop-app/renderer/api/request.ts
index 1840a9ad..a52f07cb 100644
--- a/desktop-app/renderer/api/request.ts
+++ b/desktop-app/renderer/api/request.ts
@@ -1,22 +1,29 @@
 import { getServer } from '@/lib/localStorage'
-import axios from 'axios'
+import axios, { AxiosHeaders } from 'axios'
 import { useSearchParams } from 'next/navigation'
 
 export function request(
   searchParams: ReturnType<typeof useSearchParams>,
   method: string,
   url: string,
-  ...args: any[]
+  data: Object | null = null,
+  headers: AxiosHeaders | null = null
 ) {
   const serverID = searchParams.get('server')
   if (!serverID) {
     throw new Error('No server selected')
   }
-  const serverUrl = getServer(serverID).url
+  const server = getServer(serverID)
+  const serverUrl = server.url
+  const token = server.token
   return axios({
     method: method,
     url: url,
     baseURL: serverUrl,
-    ...args
+    headers: {
+      Authorization: 'Api-Key ' + token,
+      ...headers
+    },
+    data: data || {}
   })
 }
diff --git a/desktop-app/renderer/api/spaces/spaces.ts b/desktop-app/renderer/api/spaces/spaces.ts
new file mode 100644
index 00000000..ac4062b6
--- /dev/null
+++ b/desktop-app/renderer/api/spaces/spaces.ts
@@ -0,0 +1,27 @@
+import { request } from 'api/request'
+import { AxiosResponse } from 'axios'
+import { useSearchParams } from 'next/navigation'
+
+export interface NapseSpace {
+  name: string
+  uuid: string
+  value: number
+  fleet_count: number
+  exchange_account: string
+  delta?: number
+}
+
+export async function listSpace(
+  searchParams: ReturnType<typeof useSearchParams>
+): Promise<AxiosResponse<NapseSpace[]>> {
+  const response = await request(searchParams, 'GET', '/api/space/')
+  return response as AxiosResponse<NapseSpace[]>
+}
+
+export async function getSpace(
+  searchParams: ReturnType<typeof useSearchParams>,
+  id: string
+): Promise<AxiosResponse<NapseSpace>> {
+  const response = await request(searchParams, 'GET', `/api/space/${id}/`)
+  return response as AxiosResponse<NapseSpace>
+}
diff --git a/desktop-app/renderer/components/custom/copyButton.tsx b/desktop-app/renderer/components/custom/copyButton.tsx
new file mode 100644
index 00000000..a05a70b1
--- /dev/null
+++ b/desktop-app/renderer/components/custom/copyButton.tsx
@@ -0,0 +1,52 @@
+import { CheckIcon, CopyIcon } from '@radix-ui/react-icons'
+import * as React from 'react'
+
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+
+interface CopyButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+  value: string
+  src?: string
+}
+
+export async function copyToClipboardWithMeta(value: string, event?: Event) {
+  navigator.clipboard.writeText(value)
+}
+
+export default function CopyButton({
+  value,
+  className,
+  src,
+  ...props
+}: CopyButtonProps) {
+  const [hasCopied, setHasCopied] = React.useState(false)
+
+  React.useEffect(() => {
+    setTimeout(() => {
+      setHasCopied(false)
+    }, 2000)
+  }, [hasCopied])
+
+  return (
+    <Button
+      size="icon"
+      variant="ghost"
+      className={cn(
+        'bg-foreground relative z-10 h-6 w-6 text-zinc-50',
+        className
+      )}
+      onClick={() => {
+        copyToClipboardWithMeta(value)
+        setHasCopied(true)
+      }}
+      {...props}
+    >
+      <span className="sr-only">Copy</span>
+      {hasCopied ? (
+        <CheckIcon className="h-3 w-3" />
+      ) : (
+        <CopyIcon className="h-3 w-3" />
+      )}
+    </Button>
+  )
+}
diff --git a/desktop-app/renderer/components/custom/headerPopover.tsx b/desktop-app/renderer/components/custom/headerPopover.tsx
index 92fccdf2..f4b9289e 100644
--- a/desktop-app/renderer/components/custom/headerPopover.tsx
+++ b/desktop-app/renderer/components/custom/headerPopover.tsx
@@ -19,7 +19,8 @@ import { ToastAction } from '@/components/ui/toast'
 import { useToast } from '@/components/ui/use-toast'
 import { addServer, getServers, removeServer } from '@/lib/localStorage'
 import { standardUrlPartial } from '@/lib/queryParams'
-import { PlusCircledIcon } from '@radix-ui/react-icons'
+import { PlusIcon } from '@radix-ui/react-icons'
+import { Settings } from 'lucide-react'
 import { useSearchParams } from 'next/navigation'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
@@ -28,11 +29,16 @@ export default function ServerPopover(): JSX.Element {
   const { toast } = useToast()
   const defaultServerName = 'Localhost'
   const defaultServerURL = 'http://localhost:8000'
+  const defaulAPIToken = 'xxxxxxxx.xxxxxx.xxxxxxxxx'
   const [newServerName, setNewServerName] = useState(defaultServerName)
   const [newServerURL, setNewServerURL] = useState(defaultServerURL)
+  const [newServerToken, setNewServerToken] = useState(defaulAPIToken)
   const [servers, setServers] = useState(getServers())
   const router = useRouter()
   const searchParams = useSearchParams()
+  const currentURL = router.asPath
+  const urlBase = currentURL.split('?')[0].split('/')[1]
+  const urlId = currentURL.split('?')[0].split('/')[2]
   return (
     <>
       <Popover>
@@ -43,40 +49,78 @@ export default function ServerPopover(): JSX.Element {
           <div className="flex flex-col items-stretch space-y-3">
             {Object.entries(servers).map(([key, server], index) => {
               return (
-                <div key={index + 1} className="flex flex-row space-x-5">
+                <div key={index + 1} className="flex flex-row space-x-1">
                   <Button
                     onClick={() => {
-                      router.push(
-                        standardUrlPartial(
-                          '/servers/',
-                          server.id,
-                          {
-                            server: server.id,
-                            exchangeAccount: '',
-                            space: '',
-                            fleet: '',
-                            bot: ''
-                          },
-                          searchParams
-                        )
-                      )
+                      if (currentURL === '/') {
+                        router
+                          .push(
+                            standardUrlPartial(
+                              '/exchangeAccounts/',
+                              null,
+                              {
+                                server: server.id,
+                                exchangeAccount: '',
+                                space: '',
+                                fleet: '',
+                                bot: ''
+                              },
+                              searchParams
+                            )
+                          )
+                          .catch((err) => {
+                            console.error(err)
+                          })
+                      } else {
+                        router
+                          .push(
+                            standardUrlPartial(
+                              `/${urlBase}/`,
+                              urlId,
+                              {
+                                server: server.id,
+                                exchangeAccount: '',
+                                space: '',
+                                fleet: '',
+                                bot: ''
+                              },
+                              searchParams
+                            )
+                          )
+                          .catch((err) => {
+                            console.error(err)
+                          })
+                      }
                     }}
                     variant="ghost"
-                    className="w-full"
+                    className="w-full space-x-5"
                   >
                     {server.name}
                   </Button>
                   <Button
                     onClick={() => {
-                      removeServer(key)
-                      setServers(getServers())
+                      router
+                        .push(
+                          standardUrlPartial(
+                            '/servers/',
+                            server.id,
+                            {
+                              server: server.id,
+                              exchangeAccount: '',
+                              space: '',
+                              fleet: '',
+                              bot: ''
+                            },
+                            searchParams
+                          )
+                        )
+                        .catch((err) => {
+                          console.error(err)
+                        })
                     }}
-                    variant="default"
+                    variant="outline"
                   >
-                    <div className="flex flex-row ">
-                      {/* <MinusCircledIcon className="mr-2 h-5 w-5" /> */}
-                      <div>Remove</div>
-                    </div>
+                    <Settings className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all " />
                   </Button>
                 </div>
               )
@@ -84,7 +128,7 @@ export default function ServerPopover(): JSX.Element {
             <Dialog key={0}>
               <DialogTrigger asChild>
                 <Button variant="outline" className="">
-                  <PlusCircledIcon className="mr-2 h-5 w-5" />
+                  <PlusIcon className="mr-2 h-5 w-5" />
                   Add new
                 </Button>
               </DialogTrigger>
@@ -111,11 +155,11 @@ export default function ServerPopover(): JSX.Element {
                     />
                   </div>
                   <div className="grid grid-cols-4 items-center gap-4">
-                    <Label htmlFor="username" className="text-right">
+                    <Label htmlFor="url" className="text-right">
                       URL
                     </Label>
                     <Input
-                      id="username"
+                      id="url"
                       defaultValue={defaultServerURL}
                       className="col-span-3"
                       onChange={(e) => {
@@ -123,12 +167,29 @@ export default function ServerPopover(): JSX.Element {
                       }}
                     />
                   </div>
+                  <div className="grid grid-cols-4 items-center gap-4">
+                    <Label htmlFor="token" className="text-right">
+                      API Token
+                    </Label>
+                    <Input
+                      id="token"
+                      defaultValue={defaulAPIToken}
+                      className="col-span-3"
+                      onChange={(e) => {
+                        setNewServerToken(e.currentTarget.value)
+                      }}
+                    />
+                  </div>
                 </div>
                 <DialogFooter>
                   <Button
                     type="submit"
                     onClick={() => {
-                      const id = addServer(newServerName, newServerURL)
+                      const id = addServer(
+                        newServerName,
+                        newServerURL,
+                        newServerToken
+                      )
                       setServers(getServers())
                       setNewServerName(defaultServerName)
                       setNewServerURL(defaultServerURL)
diff --git a/desktop-app/renderer/components/custom/settingsButton.tsx b/desktop-app/renderer/components/custom/settingsButton.tsx
new file mode 100644
index 00000000..f9762e4b
--- /dev/null
+++ b/desktop-app/renderer/components/custom/settingsButton.tsx
@@ -0,0 +1,21 @@
+import { Button } from '@/components/ui/button'
+import { Settings } from 'lucide-react'
+import { useRouter } from 'next/router'
+
+export function SettingsButton(): JSX.Element {
+  const router = useRouter()
+
+  return (
+    <Button
+      variant="outline"
+      size="icon"
+      onClick={() => {
+        router.push('/settings').catch((err) => {
+          console.error(err)
+        })
+      }}
+    >
+      <Settings className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all " />
+    </Button>
+  )
+}
diff --git a/desktop-app/renderer/components/layout/breadcrumb.tsx b/desktop-app/renderer/components/layout/breadcrumb.tsx
index efa963cc..9b81e0ae 100644
--- a/desktop-app/renderer/components/layout/breadcrumb.tsx
+++ b/desktop-app/renderer/components/layout/breadcrumb.tsx
@@ -1,4 +1,8 @@
-import { ExchangeAccount, get } from '@/api/exchangeAccounts/exchangeAccount'
+import {
+  ExchangeAccount,
+  getExchangeAccount
+} from '@/api/exchangeAccounts/exchangeAccount'
+import { NapseSpace, getSpace } from '@/api/spaces/spaces'
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -13,7 +17,7 @@ export default function BreadcrumbLayout() {
   const searchParams = useSearchParams()
   const serverID = searchParams.get('server') || ''
   const exchangeAccountID = searchParams.get('exchangeAccount') || ''
-  const space = searchParams.get('space') || ''
+  const spaceID = searchParams.get('space') || ''
   const fleet = searchParams.get('fleet') || ''
   const bot = searchParams.get('bot') || ''
   const server = getServer(serverID)
@@ -22,7 +26,10 @@ export default function BreadcrumbLayout() {
   useEffect(() => {
     const fetchData = async () => {
       try {
-        const response = await get(searchParams, exchangeAccountID)
+        const response = await getExchangeAccount(
+          searchParams,
+          exchangeAccountID
+        )
         setExchangeAccount(response.data)
       } catch (error) {
         console.error(error)
@@ -31,81 +38,96 @@ export default function BreadcrumbLayout() {
     exchangeAccountID && fetchData()
   }, [exchangeAccountID, searchParams])
 
+  const [space, setSpace] = useState<NapseSpace>()
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await getSpace(searchParams, spaceID)
+        setSpace(response.data)
+      } catch (error) {
+        console.error(error)
+      }
+    }
+    spaceID && fetchData()
+  }, [spaceID, searchParams])
+
   return (
-    <div className="mx-24 my-10">
-      <Breadcrumb separator="/">
-        {serverID && (
-          <BreadcrumbItem>
-            <BreadcrumbLink
-              href={standardUrlPartial(
-                '/servers/',
-                serverID,
-                {
-                  server: serverID,
-                  exchangeAccount: '',
-                  space: '',
-                  fleet: '',
-                  bot: ''
-                },
-                searchParams
-              )}
-            >
-              {server.url}
-            </BreadcrumbLink>
-          </BreadcrumbItem>
-        )}
-        {exchangeAccountID && (
-          <BreadcrumbItem isCurrentPage={!space && !fleet && !bot}>
-            <BreadcrumbLink
-              href={standardUrlPartial(
-                '/exchangeAccounts/',
-                exchangeAccountID,
-                { space: '', fleet: '', bot: '' },
-                searchParams
-              )}
-            >
-              {exchangeAccount?.name}
-            </BreadcrumbLink>
-          </BreadcrumbItem>
-        )}
-        {space && (
-          <BreadcrumbItem isCurrentPage={!fleet && !bot}>
-            <BreadcrumbLink
-              href={standardUrlPartial(
-                '/space/',
-                space,
-                { fleet: '', bot: '' },
-                searchParams
-              )}
-            >
-              {space}
-            </BreadcrumbLink>
-          </BreadcrumbItem>
-        )}
-        {fleet && (
-          <BreadcrumbItem isCurrentPage={!bot}>
-            <BreadcrumbLink
-              href={standardUrlPartial(
-                '/fleets/',
-                fleet,
-                { bot: '' },
-                searchParams
-              )}
-            >
-              {exchangeAccountID}
-            </BreadcrumbLink>
-          </BreadcrumbItem>
-        )}
-        {bot && (
-          <BreadcrumbItem isCurrentPage>
-            <BreadcrumbLink
-              href={standardUrlPartial('/bots/', bot, {}, searchParams)}
-            >
-              {exchangeAccountID}
-            </BreadcrumbLink>
-          </BreadcrumbItem>
-        )}
-      </Breadcrumb>
+    <div className="container items-center">
+      <div className=" py-3">
+        <Breadcrumb separator="/">
+          {serverID && (
+            <BreadcrumbItem>
+              <BreadcrumbLink
+                href={standardUrlPartial(
+                  '/servers/',
+                  serverID,
+                  {
+                    server: serverID,
+                    exchangeAccount: '',
+                    space: '',
+                    fleet: '',
+                    bot: ''
+                  },
+                  searchParams
+                )}
+              >
+                {server.name}
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+          )}
+          {exchangeAccountID && (
+            <BreadcrumbItem isCurrentPage={!space && !fleet && !bot}>
+              <BreadcrumbLink
+                href={standardUrlPartial(
+                  '/exchangeAccounts/',
+                  exchangeAccountID,
+                  { space: '', fleet: '', bot: '' },
+                  searchParams
+                )}
+              >
+                {exchangeAccount?.name}
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+          )}
+          {spaceID && (
+            <BreadcrumbItem isCurrentPage={!fleet && !bot}>
+              <BreadcrumbLink
+                href={standardUrlPartial(
+                  '/space/',
+                  spaceID,
+                  { fleet: '', bot: '' },
+                  searchParams
+                )}
+              >
+                {space?.name}
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+          )}
+          {fleet && (
+            <BreadcrumbItem isCurrentPage={!bot}>
+              <BreadcrumbLink
+                href={standardUrlPartial(
+                  '/fleets/',
+                  fleet,
+                  { bot: '' },
+                  searchParams
+                )}
+              >
+                {exchangeAccountID}
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+          )}
+          {bot && (
+            <BreadcrumbItem isCurrentPage>
+              <BreadcrumbLink
+                href={standardUrlPartial('/bots/', bot, {}, searchParams)}
+              >
+                {exchangeAccountID}
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+          )}
+        </Breadcrumb>
+      </div>
     </div>
   )
 }
diff --git a/desktop-app/renderer/components/layout/contextHeader.tsx b/desktop-app/renderer/components/layout/contextHeader.tsx
index 87540395..a9f95d3f 100644
--- a/desktop-app/renderer/components/layout/contextHeader.tsx
+++ b/desktop-app/renderer/components/layout/contextHeader.tsx
@@ -10,9 +10,11 @@ import { ThemeButton } from '../custom/themeButton'
 import BreadcrumbLayout from '@/components/layout/breadcrumb'
 import { standardUrlPartial } from '@/lib/queryParams'
 import { useSearchParams } from 'next/navigation'
+import { SettingsButton } from '../custom/settingsButton'
 
 export default function ContextHeader({
   children,
+  isBreadcrumb = true,
   isServer = false,
   isExchangeAccount = false,
   isSpace = false,
@@ -20,6 +22,7 @@ export default function ContextHeader({
   isBot = false
 }: {
   children: ReactNode
+  isBreadcrumb?: boolean
   isServer?: boolean
   isExchangeAccount?: boolean
   isSpace?: boolean
@@ -49,7 +52,7 @@ export default function ContextHeader({
           </Button>
           <Separator className="relative h-2/3" orientation="vertical" />
         </div>
-        <div className="flex w-full justify-start  space-x-6">
+        <div className="flex w-full justify-start space-x-6">
           {isExchangeAccount && (
             <HeaderButton
               title="Exchange Accounts"
@@ -98,10 +101,16 @@ export default function ContextHeader({
         <div className="flex justify-start space-x-2">
           {isServer && <ServerPopover />}
           <ThemeButton />
+          <SettingsButton />
         </div>
       </div>
       <Separator className="h-[1px]" />
-      <BreadcrumbLayout />
+      {isBreadcrumb && (
+        <>
+          <BreadcrumbLayout />
+          {/* <Separator className="h-[1px] w-2/3" /> */}
+        </>
+      )}
 
       <div>{children}</div>
     </>
diff --git a/desktop-app/renderer/components/ui/badge.tsx b/desktop-app/renderer/components/ui/badge.tsx
new file mode 100644
index 00000000..5e1555da
--- /dev/null
+++ b/desktop-app/renderer/components/ui/badge.tsx
@@ -0,0 +1,36 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+const badgeVariants = cva(
+  'focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-primary text-primary-foreground hover:bg-primary/80 border-transparent',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent',
+        outline: 'text-foreground'
+      }
+    },
+    defaultVariants: {
+      variant: 'default'
+    }
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }
diff --git a/desktop-app/renderer/components/ui/checkbox.tsx b/desktop-app/renderer/components/ui/checkbox.tsx
new file mode 100644
index 00000000..c900eca3
--- /dev/null
+++ b/desktop-app/renderer/components/ui/checkbox.tsx
@@ -0,0 +1,30 @@
+'use client'
+
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
+import { Check } from 'lucide-react'
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      'border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer h-4 w-4 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn('flex items-center justify-center text-current')}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }
diff --git a/desktop-app/renderer/components/ui/hover-card.tsx b/desktop-app/renderer/components/ui/hover-card.tsx
new file mode 100644
index 00000000..d4029755
--- /dev/null
+++ b/desktop-app/renderer/components/ui/hover-card.tsx
@@ -0,0 +1,29 @@
+'use client'
+
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card'
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+const HoverCard = HoverCardPrimitive.Root
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 rounded-md border p-4 shadow-md outline-none',
+      className
+    )}
+    {...props}
+  />
+))
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+
+export { HoverCard, HoverCardContent, HoverCardTrigger }
diff --git a/desktop-app/renderer/components/ui/switch.tsx b/desktop-app/renderer/components/ui/switch.tsx
new file mode 100644
index 00000000..f87ab50f
--- /dev/null
+++ b/desktop-app/renderer/components/ui/switch.tsx
@@ -0,0 +1,29 @@
+'use client'
+
+import * as SwitchPrimitives from '@radix-ui/react-switch'
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      'focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        'bg-background pointer-events-none block h-5 w-5 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0'
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }
diff --git a/desktop-app/renderer/lib/localStorage.ts b/desktop-app/renderer/lib/localStorage.ts
index 93f0571b..c1b916bf 100644
--- a/desktop-app/renderer/lib/localStorage.ts
+++ b/desktop-app/renderer/lib/localStorage.ts
@@ -2,9 +2,14 @@ interface Server {
   name: string
   url: string
   id: string
+  token: string
 }
 
-function addServer(name: string, url: string): number | undefined {
+function addServer(
+  name: string,
+  url: string,
+  token: string
+): number | undefined {
   if (typeof window !== 'undefined') {
     if (!localStorage.servers) {
       localStorage.servers = JSON.stringify({})
@@ -14,7 +19,7 @@ function addServer(name: string, url: string): number | undefined {
     while (servers[id]) {
       id++
     }
-    servers[id] = { name, url }
+    servers[id] = { name, url, token }
     localStorage.servers = JSON.stringify(servers)
     return id
   }
@@ -31,20 +36,35 @@ function removeServer(id: string): void {
   }
 }
 
+function updateServer(server: Server) {
+  if (typeof window !== 'undefined') {
+    if (!localStorage.servers) {
+      localStorage.servers = JSON.stringify({})
+    }
+    const servers = JSON.parse(localStorage.servers)
+    servers[server.id] = {
+      name: server.name,
+      url: server.url,
+      token: server.token
+    }
+    localStorage.servers = JSON.stringify(servers)
+  }
+}
+
 function getServer(id: string): Server {
   if (typeof window !== 'undefined') {
     if (!localStorage.servers) {
       localStorage.servers = JSON.stringify({})
     }
-    return (
-      { ...JSON.parse(localStorage.servers)[id], id: id.toString() } || {
-        name: '',
-        url: '',
-        id: ''
-      }
-    )
+    return {
+      id: id.toString() || '',
+      name: '',
+      url: '',
+      token: '',
+      ...JSON.parse(localStorage.servers)[id]
+    }
   }
-  return { name: '', url: '', id: '' }
+  return { name: '', url: '', id: '', token: '' }
 }
 
 function getServers(): Record<string, Server> {
@@ -53,12 +73,13 @@ function getServers(): Record<string, Server> {
       localStorage.servers = JSON.stringify({})
     }
     const parsed = JSON.parse(localStorage.servers)
-    Object.entries(parsed).map(([key, value], index) => {
-      parsed[key]['id'] = index.toString()
+    Object.keys(parsed).map((key) => {
+      parsed[key]['id'] = key.toString()
     })
     return parsed
   }
   return {}
 }
 
-export { addServer, getServer, getServers, removeServer }
+export { addServer, getServer, getServers, removeServer, updateServer }
+export type { Server }
diff --git a/desktop-app/renderer/lib/queryParams.ts b/desktop-app/renderer/lib/queryParams.ts
index 66b1a523..3f5a9589 100644
--- a/desktop-app/renderer/lib/queryParams.ts
+++ b/desktop-app/renderer/lib/queryParams.ts
@@ -12,7 +12,6 @@ export function buildURLQuery(baseUrl: string, params: Record<string, string>) {
     baseUrl = baseUrl + '/'
   }
   baseUrl = baseUrl + '?'
-
   const existingParams = baseUrl.split('?')[1]
   if (existingParams) {
     params = {
diff --git a/desktop-app/renderer/pages/exchangeAccounts/index.tsx b/desktop-app/renderer/pages/exchangeAccounts/index.tsx
index 97dcc05c..1c9e7f2e 100644
--- a/desktop-app/renderer/pages/exchangeAccounts/index.tsx
+++ b/desktop-app/renderer/pages/exchangeAccounts/index.tsx
@@ -1,7 +1,10 @@
 import InfoPanelCard from '@/components/custom/panel/infoPanelCard'
 import ContextHeader from '@/components/layout/contextHeader'
 import { standardUrlPartial } from '@/lib/queryParams'
-import { ExchangeAccount, list } from 'api/exchangeAccounts/exchangeAccount'
+import {
+  ExchangeAccount,
+  listExchangeAccount
+} from 'api/exchangeAccounts/exchangeAccount'
 import { useSearchParams } from 'next/navigation'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
@@ -15,7 +18,7 @@ export default function ExchangeAccounts(): JSX.Element {
   useEffect(() => {
     const fetchData = async () => {
       try {
-        const response = await list(searchParams)
+        const response = await listExchangeAccount(searchParams)
         setExchangeAccounts(response.data)
       } catch (error) {
         console.error(error)
diff --git a/desktop-app/renderer/pages/keys/[slug]/index.tsx b/desktop-app/renderer/pages/keys/[slug]/index.tsx
new file mode 100644
index 00000000..6d372ca6
--- /dev/null
+++ b/desktop-app/renderer/pages/keys/[slug]/index.tsx
@@ -0,0 +1,25 @@
+import ContextHeader from '@/components/layout/contextHeader'
+import { Server, getServer } from '@/lib/localStorage'
+import { useSearchParams } from 'next/navigation'
+import { useEffect, useState } from 'react'
+export default function Servers(): JSX.Element {
+  const searchParams = useSearchParams()
+  const [server, setServer] = useState<Server>(
+    getServer(searchParams.get('server') || '')
+  )
+  useEffect(
+    () => setServer(getServer(searchParams.get('server') || '')),
+    [searchParams]
+  )
+
+  return (
+    <ContextHeader isBot isBreadcrumb={false}>
+      <div className="container mt-12 space-y-6 align-middle">
+        <h1 className="text-5xl font-bold leading-tight tracking-tighter">
+          Settings - Servers
+        </h1>
+        <p className="text-xl">Here is where you can manage your servers.</p>
+      </div>
+    </ContextHeader>
+  )
+}
diff --git a/desktop-app/renderer/pages/servers/[slug]/adminFooter.tsx b/desktop-app/renderer/pages/servers/[slug]/adminFooter.tsx
new file mode 100644
index 00000000..5c19ac55
--- /dev/null
+++ b/desktop-app/renderer/pages/servers/[slug]/adminFooter.tsx
@@ -0,0 +1,156 @@
+import { createKey } from '@/api/key/key'
+import CopyButton from '@/components/custom/copyButton'
+import { Button } from '@/components/ui/button'
+import { CardFooter } from '@/components/ui/card'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { standardUrlPartial } from '@/lib/queryParams'
+import { PlusIcon } from '@radix-ui/react-icons'
+import { useSearchParams } from 'next/navigation'
+import { useRouter } from 'next/router'
+import { useState } from 'react'
+
+export default function AdminFooter({}): JSX.Element {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const defaultAPIKeyName = 'My API Key'
+  const defaultAPIKeyDescription = 'My API Key Description'
+  const [APIKeyName, setAPIKeyName] = useState(defaultAPIKeyName)
+  const [APIKeyDescription, setAPIKeyDescription] = useState(
+    defaultAPIKeyDescription
+  )
+  const [fullAPIKey, setFullAPIKey] = useState('')
+  return (
+    <CardFooter className="flex justify-between">
+      <Dialog key={0}>
+        <DialogTrigger asChild>
+          <Button>
+            <PlusIcon></PlusIcon>
+          </Button>
+        </DialogTrigger>
+        <DialogContent className="sm:max-w-[600px]">
+          <DialogHeader>
+            <DialogTitle>Create New API Key</DialogTitle>
+            <DialogDescription>
+              An API key is a unique identifier used to interact with the
+              server. You can create a new API key by providing a name and
+              description. Before you can use it, you then need to give it
+              Space-Specific permissions. Be careful who you give your API key
+              to.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid gap-4 py-4">
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="name" className="text-right">
+                Name
+              </Label>
+              <Input
+                id="name"
+                defaultValue={defaultAPIKeyName}
+                className="col-span-3"
+                onChange={(e) => {
+                  setAPIKeyName(e.currentTarget.value)
+                }}
+              />
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="Description" className="text-right">
+                Description
+              </Label>
+              <Input
+                id="description"
+                defaultValue={defaultAPIKeyDescription}
+                className="col-span-3"
+                onChange={(e) => {
+                  setAPIKeyDescription(e.currentTarget.value)
+                }}
+              />
+            </div>
+          </div>
+          {fullAPIKey && (
+            <>
+              <DialogDescription>
+                Here is the API key you just created. You can copy it and use it
+                to interact with the server. If you lose it, or leave this page
+                without copying it, you will need to create a new one.
+              </DialogDescription>
+              <div className="grid grid-cols-4 items-center gap-4">
+                <Label htmlFor="API Key" className="text-right">
+                  API Key
+                </Label>
+                <div className="col-span-3 flex flex-row items-center space-x-3">
+                  <Input
+                    id="description"
+                    value={fullAPIKey}
+                    disabled
+                    onChange={(e) => {
+                      setAPIKeyDescription(e.currentTarget.value)
+                    }}
+                  />
+                  <CopyButton
+                    className="h-7 w-8 rounded-full"
+                    value={fullAPIKey}
+                  />
+                </div>
+              </div>
+            </>
+          )}
+          <DialogFooter>
+            <div className="flex flex-1 flex-row justify-between">
+              <Button
+                onClick={async () => {
+                  try {
+                    const response = await createKey(
+                      searchParams,
+                      APIKeyName,
+                      APIKeyDescription
+                    )
+                    setFullAPIKey(response.data.key)
+                  } catch (err) {
+                    console.error(err)
+                  }
+                }}
+              >
+                Create
+              </Button>
+              {fullAPIKey && (
+                <Button
+                  onClick={() => {
+                    router
+                      .push(
+                        standardUrlPartial(
+                          '/keys/',
+                          fullAPIKey,
+                          {
+                            exchangeAccount: '',
+                            space: '',
+                            fleet: '',
+                            bot: ''
+                          },
+                          searchParams
+                        )
+                      )
+                      .catch((err) => {
+                        console.error(err)
+                      })
+                  }}
+                >
+                  Go to key
+                </Button>
+              )}
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </CardFooter>
+  )
+}
diff --git a/desktop-app/renderer/pages/servers/[slug]/index.tsx b/desktop-app/renderer/pages/servers/[slug]/index.tsx
index 10c328bb..1c2abb3a 100644
--- a/desktop-app/renderer/pages/servers/[slug]/index.tsx
+++ b/desktop-app/renderer/pages/servers/[slug]/index.tsx
@@ -1,11 +1,31 @@
 import ContextHeader from '@/components/layout/contextHeader'
-import { useRouter } from 'next/router'
-
+import { Server, getServer } from '@/lib/localStorage'
+import { useSearchParams } from 'next/navigation'
+import { useEffect, useState } from 'react'
+import SelectedAPIKey from './selectedAPIKey'
+import SelectedServer from './selectedServer'
 export default function Servers(): JSX.Element {
-  const router = useRouter()
+  const searchParams = useSearchParams()
+  const [server, setServer] = useState<Server>(
+    getServer(searchParams.get('server') || '')
+  )
+  useEffect(
+    () => setServer(getServer(searchParams.get('server') || '')),
+    [searchParams]
+  )
+
   return (
-    <ContextHeader isBot>
-      <p>Server ID: {router.query.slug}</p>
+    <ContextHeader isBot isBreadcrumb={false}>
+      <div className="container mt-12 space-y-6 align-middle">
+        <h1 className="text-5xl font-bold leading-tight tracking-tighter">
+          Settings - Servers
+        </h1>
+        <p className="text-xl">Here is where you can manage your servers.</p>
+        <div className="flex flex-row space-x-10 pt-12">
+          <SelectedServer server={server} setServer={setServer} />
+          <SelectedAPIKey server={server} />
+        </div>
+      </div>
     </ContextHeader>
   )
 }
diff --git a/desktop-app/renderer/pages/servers/[slug]/selectedAPIKey.tsx b/desktop-app/renderer/pages/servers/[slug]/selectedAPIKey.tsx
new file mode 100644
index 00000000..bbe72fef
--- /dev/null
+++ b/desktop-app/renderer/pages/servers/[slug]/selectedAPIKey.tsx
@@ -0,0 +1,208 @@
+import { Key, getKey, listKey } from '@/api/key/key'
+import { Badge } from '@/components/ui/badge'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from '@/components/ui/card'
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger
+} from '@/components/ui/hover-card'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Switch } from '@/components/ui/switch'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from '@/components/ui/table'
+import { Server } from '@/lib/localStorage'
+import { standardUrlPartial } from '@/lib/queryParams'
+import { AxiosResponse } from 'axios'
+import { useSearchParams } from 'next/navigation'
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import AdminFooter from './adminFooter'
+
+const defaultKey: Key = {
+  name: '',
+  prefix: '',
+  permissions: [],
+  is_master_key: false,
+  revoked: false,
+  description: ''
+}
+
+export default function SelectedAPIKey({
+  server
+}: {
+  server: Server
+}): JSX.Element {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const [key, setKey] = useState<Key>(defaultKey)
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response: AxiosResponse<Key> = await getKey(
+          searchParams,
+          server.token.split('.')[0]
+        )
+        setKey(response.data)
+      } catch (error) {
+        console.error(error)
+        setKey(defaultKey)
+      }
+    }
+    if (server.token) {
+      fetchData()
+    }
+  }, [server, searchParams])
+  const [isAdminView, setIsAdminView] = useState<boolean>(false)
+  const [allKeys, setAllKeys] = useState<Key[]>([])
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response: AxiosResponse<Key[]> = await listKey(searchParams)
+        setAllKeys(response.data)
+      } catch (error) {
+        console.error(error)
+        setAllKeys([])
+      }
+    }
+    if (server.token) {
+      fetchData()
+    }
+  }, [server, searchParams])
+  return (
+    <Card className="flex min-w-[450px] flex-col ">
+      <CardHeader>
+        <div className="flex flex-row justify-between">
+          <CardTitle>{isAdminView ? 'Admin View:' : 'Your key:'}</CardTitle>
+          {key.is_master_key && (
+            <HoverCard>
+              <HoverCardTrigger>
+                <Switch
+                  checked={isAdminView}
+                  onClick={() => {
+                    setIsAdminView(!isAdminView)
+                  }}
+                />
+              </HoverCardTrigger>
+              <HoverCardContent className=" text-muted-foreground w-40 text-sm">
+                {isAdminView ? 'Disable Admin View' : 'Enable Admin View'}
+              </HoverCardContent>
+            </HoverCard>
+          )}
+        </div>
+        <CardDescription>
+          {isAdminView
+            ? 'You manage all distributed API keys here.'
+            : 'You can view your API key properties here.'}
+        </CardDescription>
+      </CardHeader>
+      <div className="flex flex-1 flex-col justify-between">
+        <CardContent>
+          {isAdminView ? (
+            <div className="max-h-52 overflow-auto">
+              <Table>
+                <TableHeader>
+                  <TableRow className="hover:bg-background">
+                    <TableHead className="w-[200px]">Name</TableHead>
+                    <TableHead>Prefix</TableHead>
+                    <TableHead>Status</TableHead>
+                    <TableHead>Master</TableHead>
+                    <TableHead className="text-right">Description</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {allKeys.map((key) => (
+                    <TableRow
+                      key={key.name}
+                      onClick={() => {
+                        router
+                          .push(
+                            standardUrlPartial(
+                              '/keys/',
+                              key.prefix,
+                              {
+                                exchangeAccount: '',
+                                space: '',
+                                fleet: '',
+                                bot: ''
+                              },
+                              searchParams
+                            )
+                          )
+                          .catch((err) => {
+                            console.error(err)
+                          })
+                      }}
+                    >
+                      <TableCell>{key.name}</TableCell>
+                      <TableCell className="font-medium">
+                        {key.prefix}
+                      </TableCell>
+                      <TableCell>
+                        {key.revoked ? 'Revoked' : 'Active'}
+                      </TableCell>
+                      <TableCell>{key.is_master_key ? 'Yes' : 'No'}</TableCell>
+                      <TableCell className="text-right">
+                        {key.description}
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          ) : (
+            <div className="grid w-full items-center gap-4">
+              <div className="flex flex-col space-y-1.5">
+                <Label htmlFor="name">Name</Label>
+                <Input key={key.name} id="name" value={key.name} disabled />
+              </div>
+              <div className="flex flex-col space-y-1.5">
+                <Label htmlFor="framework">Prefix</Label>
+                <Input
+                  key={key.prefix}
+                  id="prefix"
+                  value={key.prefix}
+                  disabled
+                />
+              </div>
+              <div className="flex flex-col space-y-1.5">
+                <Label htmlFor="framework">Master Key ?</Label>
+                <Input
+                  key={key.prefix}
+                  id="prefix"
+                  value={key.is_master_key ? 'Yes' : 'No'}
+                  disabled
+                />
+              </div>
+              {key.permissions.length > 0 && (
+                <div className="flex flex-col space-y-1.5">
+                  <Label htmlFor="framework">Permissions</Label>
+                  <div className="flex flex-row space-x-2">
+                    {key.permissions.map((permission) => (
+                      <Badge key={permission} variant="secondary">
+                        {permission}
+                      </Badge>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+        </CardContent>
+        {isAdminView && <AdminFooter />}
+      </div>
+    </Card>
+  )
+}
diff --git a/desktop-app/renderer/pages/servers/[slug]/selectedServer.tsx b/desktop-app/renderer/pages/servers/[slug]/selectedServer.tsx
new file mode 100644
index 00000000..808dd3d2
--- /dev/null
+++ b/desktop-app/renderer/pages/servers/[slug]/selectedServer.tsx
@@ -0,0 +1,122 @@
+import { Button } from '@/components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { useToast } from '@/components/ui/use-toast'
+import { Server, removeServer, updateServer } from '@/lib/localStorage'
+import { standardUrlPartial } from '@/lib/queryParams'
+import { useSearchParams } from 'next/navigation'
+import { useRouter } from 'next/router'
+import { Dispatch, SetStateAction } from 'react'
+
+export default function SelectedServer({
+  server,
+  setServer
+}: {
+  server: Server
+  setServer: Dispatch<SetStateAction<Server>>
+}): JSX.Element {
+  const searchParams = useSearchParams()
+  const router = useRouter()
+  const { toast } = useToast()
+  return (
+    <Card className="w-[450px]">
+      <CardHeader>
+        <CardTitle>Selected Server: {server.name}</CardTitle>
+        <CardDescription>
+          You can view/edit your server properties here.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form>
+          <div className="grid w-full items-center gap-4">
+            <div className="flex flex-col space-y-1.5">
+              <Label htmlFor="name">Name</Label>
+              <Input
+                key={server.id}
+                id="name"
+                defaultValue={server.name}
+                onChange={(e) => {
+                  setServer({ ...server, name: e.currentTarget.value })
+                }}
+              />
+            </div>
+            <div className="flex flex-col space-y-1.5">
+              <Label htmlFor="framework">URL</Label>
+              <Input
+                key={server.id}
+                id="name"
+                defaultValue={server.url}
+                onChange={(e) => {
+                  setServer({ ...server, url: e.currentTarget.value })
+                }}
+              />
+            </div>
+            <div className="flex flex-col space-y-1.5">
+              <Label htmlFor="framework">API Token</Label>
+              <Input
+                key={server.id}
+                id="name"
+                defaultValue={server.token}
+                onChange={(e) => {
+                  setServer({ ...server, token: e.currentTarget.value })
+                }}
+              />
+            </div>
+          </div>
+        </form>
+      </CardContent>
+      <CardFooter className="flex justify-between">
+        <Button
+          onClick={() => {
+            updateServer(server)
+            setServer({ ...server })
+            toast({
+              title: `Successfully edited server !`,
+              description: `${server.name} updated`
+            })
+          }}
+        >
+          Save
+        </Button>
+        <Button
+          variant="destructive"
+          onClick={() => {
+            removeServer(server.id)
+            router
+              .push(
+                standardUrlPartial(
+                  '/servers/',
+                  null,
+                  {
+                    server: '',
+                    exchangeAccount: '',
+                    space: '',
+                    fleet: '',
+                    bot: ''
+                  },
+                  searchParams
+                )
+              )
+              .catch((err) => {
+                console.error(err)
+              })
+            toast({
+              title: `Successfully deleted server !`,
+              description: `${server.name} deleted`
+            })
+          }}
+        >
+          Delete
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/desktop-app/renderer/pages/servers/index.tsx b/desktop-app/renderer/pages/servers/index.tsx
index 17ca44cd..1cb26fc4 100644
--- a/desktop-app/renderer/pages/servers/index.tsx
+++ b/desktop-app/renderer/pages/servers/index.tsx
@@ -2,11 +2,14 @@ import MinimalistPanelCard from '@/components/custom/panel/minimalistPanelCard'
 import ContextHeader from '@/components/layout/contextHeader'
 
 import { getServers } from '@/lib/localStorage'
+import { standardUrlPartial } from '@/lib/queryParams'
+import { useSearchParams } from 'next/navigation'
 import { useRouter } from 'next/router'
 
 export default function Servers(): JSX.Element {
   const router = useRouter()
   const servers = getServers()
+  const searchParams = useSearchParams()
   return (
     <ContextHeader isBot>
       <div className="mx-auto my-10 grid max-w-screen-xl gap-6 px-24 lg:grid-cols-3">
@@ -16,9 +19,24 @@ export default function Servers(): JSX.Element {
             title={server.name}
             tooltip={server.url}
             onClick={() => {
-              router.push(`/servers/${server.name}`).catch((err) => {
-                console.error(err)
-              })
+              router
+                .push(
+                  standardUrlPartial(
+                    '/servers/',
+                    server.id,
+                    {
+                      server: server.id,
+                      exchangeAccount: '',
+                      space: '',
+                      fleet: '',
+                      bot: ''
+                    },
+                    searchParams
+                  )
+                )
+                .catch((err) => {
+                  console.error(err)
+                })
             }}
           />
         ))}
diff --git a/desktop-app/renderer/pages/settings/index.tsx b/desktop-app/renderer/pages/settings/index.tsx
new file mode 100644
index 00000000..1a692c37
--- /dev/null
+++ b/desktop-app/renderer/pages/settings/index.tsx
@@ -0,0 +1,9 @@
+import Link from 'next/link'
+
+export default function Servers(): JSX.Element {
+  return (
+    <Link href={'/'}>
+      <h1>Home</h1>
+    </Link>
+  )
+}
diff --git a/desktop-app/renderer/pages/spaces/[name]/index.tsx b/desktop-app/renderer/pages/spaces/[name]/index.tsx
index c6bfaef5..154b35c3 100644
--- a/desktop-app/renderer/pages/spaces/[name]/index.tsx
+++ b/desktop-app/renderer/pages/spaces/[name]/index.tsx
@@ -1,19 +1,16 @@
 import ContextHeader from '@/components/layout/contextHeader'
-import React from 'react'
-import ValuePanelCard from '@/components/custom/panel/valuePanelCard'
+import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { DonutChart, AreaChart } from '@tremor/react'
+import { ScrollArea } from '@/components/ui/scroll-area'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
-import { Button } from '@/components/ui/button'
-import { useState } from 'react'
 import { useToast } from '@/components/ui/use-toast'
-import { ScrollArea } from '@/components/ui/scroll-area'
+import { AreaChart, DonutChart } from '@tremor/react'
+import React, { useState } from 'react'
 
+import StatCard from '@/components/custom/statCard'
 import { Currency, getAssetColumns } from './assetsTable/columns'
 import { AssetsDataTable } from './assetsTable/data-table'
-import { Operation, columns } from './transactionHistTable/columns'
 import { OperationDataTable } from './transactionHistTable/data-table'
-import StatCard from '@/components/custom/statCard'
 
 const cities = [
   {
@@ -216,7 +213,7 @@ export default function Spaces(): JSX.Element {
             <TabsTrigger value="fleets">Fleets</TabsTrigger>
           </TabsList>
           <TabsContent value="space">
-            <div className="mx-auto my-10 grid max-w-screen-xl gap-6 lg:grid-cols-3">
+            <div className="my-10 grid max-w-screen-xl gap-6 lg:grid-cols-3">
               {spaces.map((space, index) => (
                 <StatCard
                   key={index}
@@ -235,12 +232,12 @@ export default function Spaces(): JSX.Element {
                 // />
               ))}
             </div>
-            <div className="mx-auto my-10 h-24 max-w-screen-xl justify-center">
+            <div className=" my-10 h-24 max-w-screen-xl justify-center">
               <GraphCardComponent />
             </div>
           </TabsContent>
           <TabsContent value="wallet">
-            <div className="mx-auto my-10 grid max-w-screen-xl gap-6">
+            <div className=" my-10 grid max-w-screen-xl gap-6">
               <Card className="">
                 <CardHeader className="mt-0 flex flex-row justify-between">
                   <CardTitle className="">Transaction history</CardTitle>
@@ -281,7 +278,7 @@ export default function Spaces(): JSX.Element {
                   <div className="col-span-3">
                     <Card className="py-8">
                       <CardHeader>
-                        <CardTitle></CardTitle>
+                        <CardTitle />
                       </CardHeader>
                       <CardContent className="">
                         <DonutChart
diff --git a/desktop-app/renderer/pages/spaces/index.tsx b/desktop-app/renderer/pages/spaces/index.tsx
index ac85d048..4c1f8f3e 100644
--- a/desktop-app/renderer/pages/spaces/index.tsx
+++ b/desktop-app/renderer/pages/spaces/index.tsx
@@ -1,26 +1,21 @@
-import ContextHeader from '@/components/layout/contextHeader'
 import ValuePanelCard from '@/components/custom/panel/valuePanelCard'
+import ContextHeader from '@/components/layout/contextHeader'
 
-import { useDispatch } from 'react-redux'
+import { NapseSpace, listSpace } from '@/api/spaces/spaces'
+import { standardUrlPartial } from '@/lib/queryParams'
+import { AxiosResponse } from 'axios'
+import { useSearchParams } from 'next/navigation'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
-import axios from '@/api/axios'
-import { AxiosResponse } from 'axios'
-
-interface Space {
-  name: string
-  id: number
-  value: number
-  fleet_count: number
-  delta?: number
-}
 
 export default function Spaces(): JSX.Element {
-  const [spaces, setSpaces] = useState<Space[]>([])
+  const [spaces, setSpaces] = useState<NapseSpace[]>([])
+  const searchParams = useSearchParams()
   useEffect(() => {
     const fetchData = async () => {
       try {
-        const response: AxiosResponse<Space[]> = await axios.get('/space/')
+        const response: AxiosResponse<NapseSpace[]> =
+          await listSpace(searchParams)
         setSpaces(response.data)
       } catch (error) {
         console.error(error)
@@ -28,13 +23,10 @@ export default function Spaces(): JSX.Element {
       }
     }
     fetchData()
-  }, [])
+  }, [searchParams])
 
-  const dispatch = useDispatch()
   const router = useRouter()
-  // useEffect(() => {
-  //   dispatch(SET_SPACE_NAMES(spaces.map((space) => space.name)))
-  // }, [spaces, dispatch])
+
   return (
     <ContextHeader isBot>
       <div className="mx-auto my-10 grid max-w-screen-xl gap-6 px-24 lg:grid-cols-3">
@@ -46,9 +38,21 @@ export default function Spaces(): JSX.Element {
             delta={space.delta}
             // tooltip={space.tooltip}
             onClick={() => {
-              router.push(`/spaces/${space.name}`).catch((err) => {
-                console.error(err)
-              })
+              router
+                .push(
+                  standardUrlPartial(
+                    '/spaces/',
+                    space.uuid,
+                    {
+                      exchangeAccount: space.exchange_account,
+                      space: space.uuid
+                    },
+                    searchParams
+                  )
+                )
+                .catch((err) => {
+                  console.error(err)
+                })
             }}
             badge={String(space.fleet_count) + ' fleets'}
           />
diff --git a/desktop-app/yarn.lock b/desktop-app/yarn.lock
index 10ea4439..3f65390b 100644
--- a/desktop-app/yarn.lock
+++ b/desktop-app/yarn.lock
@@ -1582,6 +1582,21 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-primitive" "1.0.3"
 
+"@radix-ui/react-checkbox@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-checkbox/-/react-checkbox-1.0.4.tgz#98f22c38d5010dd6df4c5744cac74087e3275f4b"
+  integrity sha512-CBuGQa52aAYnADZVt/KBQzXrwx6TqnlwtcIPGtVt5JkkzQwMOLJjPukimhfKEr4GQNd43C+djUh5Ikopj8pSLg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-presence" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+    "@radix-ui/react-use-previous" "1.0.1"
+    "@radix-ui/react-use-size" "1.0.1"
+
 "@radix-ui/react-collapsible@1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-collapsible/-/react-collapsible-1.0.3.tgz#df0e22e7a025439f13f62d4e4a9e92c4a0df5b81"
@@ -1693,6 +1708,22 @@
     "@radix-ui/react-primitive" "1.0.3"
     "@radix-ui/react-use-callback-ref" "1.0.1"
 
+"@radix-ui/react-hover-card@^1.0.7":
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-hover-card/-/react-hover-card-1.0.7.tgz#684bca2504432566357e7157e087051aa3577948"
+  integrity sha512-OcUN2FU0YpmajD/qkph3XzMcK/NmSk9hGWnjV68p6QiZMgILugusgQwnLSDs3oFSJYGKf3Y49zgFedhGh04k9A==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-dismissable-layer" "1.0.5"
+    "@radix-ui/react-popper" "1.1.3"
+    "@radix-ui/react-portal" "1.0.4"
+    "@radix-ui/react-presence" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+
 "@radix-ui/react-icons@^1.3.0":
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-icons/-/react-icons-1.3.0.tgz#c61af8f323d87682c5ca76b856d60c2312dbcb69"
@@ -1888,6 +1919,20 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-compose-refs" "1.0.1"
 
+"@radix-ui/react-switch@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-switch/-/react-switch-1.0.3.tgz#6119f16656a9eafb4424c600fdb36efa5ec5837e"
+  integrity sha512-mxm87F88HyHztsI7N+ZUmEoARGkC22YVW5CaC+Byc+HRpuvCrOBPTAnXgf+tZ/7i0Sg/eOePGdMhUKhPaQEqow==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+    "@radix-ui/react-use-previous" "1.0.1"
+    "@radix-ui/react-use-size" "1.0.1"
+
 "@radix-ui/react-tabs@^1.0.4":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-tabs/-/react-tabs-1.0.4.tgz#993608eec55a5d1deddd446fa9978d2bc1053da2"