diff --git a/desktop-app/renderer/api/exchangeAccounts/exchangeAccount.ts b/desktop-app/renderer/api/exchangeAccounts/exchangeAccount.ts
index 057f5c46..f9b550b6 100644
--- a/desktop-app/renderer/api/exchangeAccounts/exchangeAccount.ts
+++ b/desktop-app/renderer/api/exchangeAccounts/exchangeAccount.ts
@@ -3,27 +3,54 @@ import { AxiosResponse } from 'axios'
 import { useSearchParams } from 'next/navigation'
 
 export interface ExchangeAccount {
-  uuid: string
   name: string
-  exchange_name: string
+  description: string
+  exchange: string
   testing: boolean
 }
+export interface RetreivedExchangeAccount extends ExchangeAccount {
+  uuid: string
+}
 
 export async function listExchangeAccount(
   searchParams: ReturnType<typeof useSearchParams>
-): Promise<AxiosResponse<ExchangeAccount[]>> {
+): Promise<AxiosResponse<RetreivedExchangeAccount[]>> {
   const response = await request(searchParams, 'GET', '/api/exchange_account/')
-  return response as AxiosResponse<ExchangeAccount[]>
+  return response as AxiosResponse<RetreivedExchangeAccount[]>
 }
 
 export async function getExchangeAccount(
   searchParams: ReturnType<typeof useSearchParams>,
   id: string
-): Promise<AxiosResponse<ExchangeAccount>> {
+): Promise<AxiosResponse<RetreivedExchangeAccount>> {
   const response = await request(
     searchParams,
     'GET',
     `/api/exchange_account/${id}/`
   )
-  return response as AxiosResponse<ExchangeAccount>
+  return response as AxiosResponse<RetreivedExchangeAccount>
+}
+
+export async function createExchangeAccount(
+  searchParams: ReturnType<typeof useSearchParams>,
+  data: ExchangeAccount
+): Promise<AxiosResponse<RetreivedExchangeAccount>> {
+  const response = await request(
+    searchParams,
+    'POST',
+    '/api/exchange_account/',
+    data
+  )
+  return response as AxiosResponse<RetreivedExchangeAccount>
+}
+
+export async function getPossibleExchanges(
+  searchParams: ReturnType<typeof useSearchParams>
+): Promise<AxiosResponse<string[]>> {
+  const response = await request(
+    searchParams,
+    'GET',
+    '/api/exchange_account/possible_exchanges/'
+  )
+  return response as AxiosResponse<string[]>
 }
diff --git a/desktop-app/renderer/components/custom/headerPopover.tsx b/desktop-app/renderer/components/custom/headerPopover.tsx
index ff72d1e9..c962cee2 100644
--- a/desktop-app/renderer/components/custom/headerPopover.tsx
+++ b/desktop-app/renderer/components/custom/headerPopover.tsx
@@ -136,10 +136,11 @@ export default function ServerPopover(): JSX.Element {
             </DialogTrigger>
             <DialogContent className="sm:max-w-[425px]">
               <DialogHeader>
-                <DialogTitle>Add New Server</DialogTitle>
+                <DialogTitle>Add a new Server</DialogTitle>
                 <DialogDescription>
-                  Add a new server will allow you to connect to it. You just
-                  have to provide the server name and the server URL.
+                  Adding a new server will allow you to connect to it. You just
+                  have to provide the server name, the server URL and a valid
+                  API key.
                 </DialogDescription>
               </DialogHeader>
               <div className="grid gap-4 py-4">
diff --git a/desktop-app/renderer/components/custom/panel/infoPanelCard.tsx b/desktop-app/renderer/components/custom/panel/infoPanelCard.tsx
index 262347ce..b4866f39 100644
--- a/desktop-app/renderer/components/custom/panel/infoPanelCard.tsx
+++ b/desktop-app/renderer/components/custom/panel/infoPanelCard.tsx
@@ -4,24 +4,28 @@ import { ReactNode } from 'react'
 function InfoPanelCard({
   title = '',
   badge = '',
-  category = '',
+  textContent = '',
+  description = '',
   tooltip = '',
   onClick = () => {}
 }: {
-  title: ReactNode
+  title?: ReactNode
   badge?: ReactNode
-  category?: ReactNode
+  textContent: ReactNode
+  description?: ReactNode
   tooltip?: ReactNode
   onClick?: () => void
 }): JSX.Element {
   return (
     <PanelCard
-      title={category}
+      className="h-32 w-80"
+      title={title}
       badge={badge}
+      description={description}
       tooltip={tooltip}
       onClick={onClick}
     >
-      <div className="text-2xl font-bold">{title}</div>
+      <div className="text-2xl font-bold">{textContent}</div>
     </PanelCard>
   )
 }
diff --git a/desktop-app/renderer/components/custom/panel/minimalistPanelCard.tsx b/desktop-app/renderer/components/custom/panel/minimalistPanelCard.tsx
index 32bfdf18..8be9d008 100644
--- a/desktop-app/renderer/components/custom/panel/minimalistPanelCard.tsx
+++ b/desktop-app/renderer/components/custom/panel/minimalistPanelCard.tsx
@@ -1,6 +1,6 @@
 import PanelCard from '@/components/custom/panel/panelCard'
 
-function MinimalistPanelCard({
+export default function MinimalistPanelCard({
   title,
   tooltip,
   onClick = () => {}
@@ -15,5 +15,3 @@ function MinimalistPanelCard({
     </PanelCard>
   )
 }
-
-export default MinimalistPanelCard
diff --git a/desktop-app/renderer/components/custom/panel/panelCard.tsx b/desktop-app/renderer/components/custom/panel/panelCard.tsx
index 36ebc659..7178faf0 100644
--- a/desktop-app/renderer/components/custom/panel/panelCard.tsx
+++ b/desktop-app/renderer/components/custom/panel/panelCard.tsx
@@ -7,15 +7,18 @@ import {
 } from '@/components/ui/card'
 import React, { ReactNode } from 'react'
 
+import { Badge } from '@/components/ui/badge'
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger
 } from '@/components/ui/tooltip'
+import { cn } from '@/lib/utils'
 
 interface CardComponentProps {
   children: React.ReactNode
+  className?: string
   title?: string | React.ReactNode
   badge?: string | React.ReactNode
   description?: string | React.ReactNode
@@ -24,28 +27,33 @@ interface CardComponentProps {
 }
 
 const CardComponent = React.forwardRef<HTMLDivElement, CardComponentProps>(
-  ({ children, title, badge, description, onClick }, ref) => {
+  ({ children, className, title, badge, description, onClick }, ref) => {
     return (
-      <Card className="hover:shadow-sm" onClick={onClick} ref={ref}>
-        <CardHeader className="flex flex-row items-center justify-between space-y-0 p-5">
-          {typeof title === 'string' ? (
+      <Card
+        className={cn(
+          'hover:bg-secondary space-y-2 flex flex-col justify-center',
+          className
+        )}
+        onClick={onClick}
+        ref={ref}
+      >
+        {(title || badge) && (
+          <CardHeader className="flex flex-row items-end justify-between space-y-0 ">
             <CardTitle className="text-sm font-normal">{title}</CardTitle>
-          ) : (
-            title
-          )}
-          {typeof badge === 'string' ? (
-            <div className="text-xs italic">{badge}</div>
-          ) : (
-            badge
-          )}
-        </CardHeader>
-        <CardContent>
+            {badge && (
+              <Badge className="text-xs italic hover:bg-foreground">
+                {badge}
+              </Badge>
+            )}
+          </CardHeader>
+        )}
+        <CardContent
+          className={
+            'flex flex-col items-center' + (title || badge ? '' : ' pt-6')
+          }
+        >
           {children}
-          {typeof description === 'string' ? (
-            <CardDescription>{description}</CardDescription>
-          ) : (
-            description
-          )}
+          {description && <CardDescription>{description}</CardDescription>}
         </CardContent>
       </Card>
     )
@@ -54,6 +62,7 @@ const CardComponent = React.forwardRef<HTMLDivElement, CardComponentProps>(
 
 export default function PanelCard({
   children,
+  className = '',
   title = '',
   badge = '',
   description = '',
@@ -61,6 +70,7 @@ export default function PanelCard({
   onClick = () => {}
 }: {
   children: ReactNode
+  className?: string
   title?: ReactNode
   badge?: ReactNode
   description?: ReactNode
@@ -70,8 +80,9 @@ export default function PanelCard({
   return tooltip ? (
     <TooltipProvider>
       <Tooltip>
-        <TooltipTrigger asChild>
+        <TooltipTrigger>
           <CardComponent
+            className={className}
             title={title}
             badge={badge}
             onClick={onClick}
@@ -84,6 +95,7 @@ export default function PanelCard({
     </TooltipProvider>
   ) : (
     <CardComponent
+      className={className}
       title={title}
       badge={badge}
       onClick={onClick}
diff --git a/desktop-app/renderer/components/custom/panel/valuePanelCard.tsx b/desktop-app/renderer/components/custom/panel/valuePanelCard.tsx
index 7b4b98c1..2f97c9dc 100644
--- a/desktop-app/renderer/components/custom/panel/valuePanelCard.tsx
+++ b/desktop-app/renderer/components/custom/panel/valuePanelCard.tsx
@@ -24,15 +24,6 @@ function formatCurrencyValue(value: number): string {
   }).format(value)
 }
 
-type valuePanelCardProps = {
-  title: string | React.ReactNode
-  badge?: string | React.ReactNode
-  value: number
-  delta?: number
-  tooltip?: string
-  onClick?: () => void
-}
-
 function ValuePanelCard({
   title = '',
   badge = '',
@@ -40,7 +31,14 @@ function ValuePanelCard({
   delta = 0,
   tooltip = '',
   onClick = () => {}
-}: valuePanelCardProps): JSX.Element {
+}: {
+  title: string | React.ReactNode
+  badge?: string | React.ReactNode
+  value: number
+  delta?: number
+  tooltip?: string
+  onClick?: () => void
+}): JSX.Element {
   return (
     <PanelCard
       title={title}
diff --git a/desktop-app/renderer/components/ui/card.tsx b/desktop-app/renderer/components/ui/card.tsx
index 9ee7825e..23a78a8f 100644
--- a/desktop-app/renderer/components/ui/card.tsx
+++ b/desktop-app/renderer/components/ui/card.tsx
@@ -94,4 +94,4 @@ CardFooter.propTypes = {
   className: PropTypes.string
 }
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }
diff --git a/desktop-app/renderer/components/ui/select.tsx b/desktop-app/renderer/components/ui/select.tsx
index 7e82b4d8..e3016b9e 100644
--- a/desktop-app/renderer/components/ui/select.tsx
+++ b/desktop-app/renderer/components/ui/select.tsx
@@ -1,8 +1,8 @@
 'use client'
 
-import * as React from 'react'
 import * as SelectPrimitive from '@radix-ui/react-select'
 import { Check, ChevronDown } from 'lucide-react'
+import * as React from 'react'
 
 import { cn } from '@/lib/utils'
 
@@ -111,11 +111,11 @@ SelectSeparator.displayName = SelectPrimitive.Separator.displayName
 
 export {
   Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
   SelectContent,
-  SelectLabel,
+  SelectGroup,
   SelectItem,
-  SelectSeparator
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue
 }
diff --git a/desktop-app/renderer/pages/exchangeAccounts/[slug]/index.tsx b/desktop-app/renderer/pages/exchangeAccounts/[slug]/index.tsx
index 71eb5c41..ed7f388e 100644
--- a/desktop-app/renderer/pages/exchangeAccounts/[slug]/index.tsx
+++ b/desktop-app/renderer/pages/exchangeAccounts/[slug]/index.tsx
@@ -1,11 +1,58 @@
+import {
+  RetreivedExchangeAccount,
+  getExchangeAccount
+} from '@/api/exchangeAccounts/exchangeAccount'
 import ContextHeader from '@/components/layout/contextHeader'
+import DefaultPageLayout from '@/components/layout/defaultPageLayout'
+import { useSearchParams } from 'next/navigation'
 import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+
+const defaultExchangeAccount: RetreivedExchangeAccount = {
+  uuid: '',
+  name: '',
+  description: '',
+  testing: false,
+  exchange: ''
+}
 
 export default function ExchangeAccount(): JSX.Element {
   const router = useRouter()
+  const searchParams = useSearchParams()
+  const [exchangeAccount, setExchangeAccount] =
+    useState<RetreivedExchangeAccount>(defaultExchangeAccount)
+
+  useEffect(() => {
+    const fetchExchangeAccount = async () => {
+      try {
+        const response = await getExchangeAccount(
+          searchParams,
+          router.query.slug as string
+        )
+        setExchangeAccount(response.data)
+      } catch (error) {
+        console.error(error)
+        setExchangeAccount(defaultExchangeAccount)
+      }
+    }
+    if (searchParams.get('server')) {
+      fetchExchangeAccount()
+    }
+  }, [searchParams, router.query.slug])
+
   return (
     <ContextHeader isBot>
-      <h1>Exchange Account {router.query.slug}</h1>
+      <DefaultPageLayout
+        header={
+          'Exchange Account' +
+          (exchangeAccount.name && ' - ' + exchangeAccount.name)
+        }
+        description={
+          'Here is an overview of your exchange account. An exchange account reprents a connection to an exchange/broker.'
+        }
+      >
+        <div></div>
+      </DefaultPageLayout>
     </ContextHeader>
   )
 }
diff --git a/desktop-app/renderer/pages/exchangeAccounts/createExchangeAccountDialog.tsx b/desktop-app/renderer/pages/exchangeAccounts/createExchangeAccountDialog.tsx
new file mode 100644
index 00000000..77e0cf7e
--- /dev/null
+++ b/desktop-app/renderer/pages/exchangeAccounts/createExchangeAccountDialog.tsx
@@ -0,0 +1,182 @@
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select'
+import { Switch } from '@/components/ui/switch'
+import { DialogClose } from '@radix-ui/react-dialog'
+import { PlusIcon } from '@radix-ui/react-icons'
+import {
+  RetreivedExchangeAccount,
+  createExchangeAccount,
+  getPossibleExchanges
+} from 'api/exchangeAccounts/exchangeAccount'
+import { useSearchParams } from 'next/navigation'
+import { useEffect, useState } from 'react'
+
+export default function CreateExchangeAccountDialog({
+  exchangeAccounts,
+  setExchangeAccounts
+}: {
+  exchangeAccounts: RetreivedExchangeAccount[]
+  setExchangeAccounts: React.Dispatch<
+    React.SetStateAction<RetreivedExchangeAccount[]>
+  >
+}): JSX.Element {
+  const searchParams = useSearchParams()
+  const defaultExchangeAccountName = 'My Exchange Account'
+  const defaultExchangeAccountDescription = 'My Exchange Account Description'
+  const [newExchangeAccountName, setNewExchangeAccountName] = useState(
+    defaultExchangeAccountName
+  )
+  const [newExchangeAccountDescription, setNewExchangeAccountDescription] =
+    useState(defaultExchangeAccountDescription)
+
+  const [newExchangeAccountTesting, setNewExchangeAccountTesting] =
+    useState(true)
+
+  const [possibleExchanges, setPossibleExchanges] = useState<string[]>([])
+  const [selectedExchange, setSelectedExchange] = useState<string>('')
+
+  useEffect(() => {
+    const fetchPossibleExchanges = async () => {
+      try {
+        const response = await getPossibleExchanges(searchParams)
+        setPossibleExchanges(response.data)
+        setSelectedExchange(response.data[0])
+      } catch (error) {
+        console.error(error)
+        setPossibleExchanges([])
+      }
+    }
+
+    if (searchParams.get('server')) {
+      fetchPossibleExchanges()
+    }
+  }, [searchParams])
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="ghost" className="h-32 w-80">
+          <PlusIcon className="mr-2 h-5 w-5" />
+          Add new
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Add a new Exchange Account</DialogTitle>
+          <DialogDescription>
+            Add a new server will allow you to connect to it. You just have to
+            provide the server name and the server URL.
+          </DialogDescription>
+        </DialogHeader>
+        <form>
+          <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={defaultExchangeAccountName}
+                className="col-span-3"
+                onChange={(e) => {
+                  setNewExchangeAccountName(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={defaultExchangeAccountDescription}
+                className="col-span-3"
+                onChange={(e) => {
+                  setNewExchangeAccountDescription(e.currentTarget.value)
+                }}
+              />
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="exchange" className="text-right">
+                Exchange
+              </Label>
+              <Select
+                onValueChange={(exchange) => {
+                  setSelectedExchange(exchange)
+                }}
+                defaultValue={possibleExchanges[0]}
+              >
+                <SelectTrigger className="col-span-3">
+                  <SelectValue placeholder="Select - Exchange" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectLabel>Space</SelectLabel>
+                    {possibleExchanges.map((exchange, index) => (
+                      <SelectItem key={index} value={exchange}>
+                        {exchange}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="testing" className="text-right">
+                Testing
+              </Label>
+              <Switch
+                id="testing"
+                checked={newExchangeAccountTesting}
+                onClick={() => {
+                  setNewExchangeAccountTesting(!newExchangeAccountTesting)
+                }}
+              />
+            </div>
+          </div>
+        </form>
+        <div className="flex flex-col items-end">
+          <Button
+            className=""
+            type="submit"
+            size="default"
+            onClick={async () => {
+              try {
+                const response = await createExchangeAccount(searchParams, {
+                  name: newExchangeAccountName,
+                  description: newExchangeAccountDescription,
+                  testing: newExchangeAccountTesting,
+                  exchange: selectedExchange
+                })
+                setExchangeAccounts([...exchangeAccounts, response.data])
+                document.getElementById('close-button')?.click()
+              } catch (error) {
+                console.log(error)
+              }
+            }}
+          >
+            Create
+          </Button>
+        </div>
+      </DialogContent>
+      <DialogClose id="close-button" />
+    </Dialog>
+  )
+}
diff --git a/desktop-app/renderer/pages/exchangeAccounts/index.tsx b/desktop-app/renderer/pages/exchangeAccounts/index.tsx
index 639f4e7d..369f366e 100644
--- a/desktop-app/renderer/pages/exchangeAccounts/index.tsx
+++ b/desktop-app/renderer/pages/exchangeAccounts/index.tsx
@@ -3,21 +3,23 @@ import ContextHeader from '@/components/layout/contextHeader'
 import DefaultPageLayout from '@/components/layout/defaultPageLayout'
 import { standardUrlPartial } from '@/lib/queryParams'
 import {
-  ExchangeAccount,
+  RetreivedExchangeAccount,
   listExchangeAccount
 } from 'api/exchangeAccounts/exchangeAccount'
 import { useSearchParams } from 'next/navigation'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
+import CreateExchangeAccountDialog from './createExchangeAccountDialog'
 
 export default function ExchangeAccounts(): JSX.Element {
-  const [exchangeAccounts, setExchangeAccounts] = useState<ExchangeAccount[]>(
-    []
-  )
   const searchParams = useSearchParams()
   const router = useRouter()
+  const [exchangeAccounts, setExchangeAccounts] = useState<
+    RetreivedExchangeAccount[]
+  >([])
+
   useEffect(() => {
-    const fetchData = async () => {
+    const fetchExchangeAccounts = async () => {
       try {
         const response = await listExchangeAccount(searchParams)
         setExchangeAccounts(response.data)
@@ -26,22 +28,26 @@ export default function ExchangeAccounts(): JSX.Element {
         setExchangeAccounts([])
       }
     }
-    fetchData()
-  }, [searchParams])
 
+    if (searchParams.get('server')) {
+      fetchExchangeAccounts()
+    }
+  }, [searchParams])
   return (
     <ContextHeader isBot>
       <DefaultPageLayout
-        header={'Settings - Key'}
-        description={'Here is where you can manage your distibuted API keys.'}
+        header={'Your Exchange Accounts'}
+        description={
+          'Here is an overview of all your exchange accounts. An exchange account reprents a connection to an exchange/broker.'
+        }
       >
         <div className="my-10 grid max-w-screen-xl gap-6 grid-cols-3">
           {exchangeAccounts.map((exchangeAccount, index) => (
             <InfoPanelCard
               key={index}
-              title={exchangeAccount.name}
-              category={exchangeAccount.exchange_name.toLowerCase()}
-              badge={exchangeAccount.testing ? 'testing' : ''}
+              title={'Exchange : ' + exchangeAccount.exchange}
+              textContent={exchangeAccount.name}
+              badge={exchangeAccount.testing ? 'testing' : null}
               onClick={() => {
                 router.push(
                   standardUrlPartial(
@@ -59,6 +65,15 @@ export default function ExchangeAccounts(): JSX.Element {
               }}
             />
           ))}
+          <InfoPanelCard
+            title=""
+            textContent={
+              <CreateExchangeAccountDialog
+                exchangeAccounts={exchangeAccounts}
+                setExchangeAccounts={setExchangeAccounts}
+              />
+            }
+          />
         </div>
       </DefaultPageLayout>
     </ContextHeader>