diff --git a/src/pages/webapp/Dashboard.tsx b/src/pages/webapp/Dashboard.tsx
index daeb3cc..d38fa43 100644
--- a/src/pages/webapp/Dashboard.tsx
+++ b/src/pages/webapp/Dashboard.tsx
@@ -36,7 +36,7 @@ import {DecisionHttpService} from "@/services/decision-http-service.ts";
 import {UsersHttpService} from "@/services/users-http-service.ts";
 import {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from "@/components/ui/tooltip.tsx";
 import {Badge} from "@/components/ui/badge.tsx";
-import {Card, CardDescription, CardHeader, CardTitle} from "@/components/ui/card.tsx";
+import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card.tsx";
 import {NewsItem} from "@/model/NewsItem.ts";
 import {Alert} from "@/model/Alert.ts";
 import {NewsHttpService} from "@/services/news-http-service.ts";
@@ -75,6 +75,7 @@ function Summary() {
             const alerts = await alertsHttpService.getAlerts();
             setAlerts(alerts);
         }
+
         fetchInitialData().then();
     }, []);
 
@@ -97,7 +98,8 @@ function Summary() {
 
     return (
         <div className={"flex flex-col gap-5"}>
-            <Card onClick={() => navigate("/news")} className={"md:flex-1 bg-neutral-100 shadow-none border-none cursor-pointer"}>
+            <Card onClick={() => navigate("/news")}
+                  className={"md:flex-1 bg-neutral-100 shadow-none border-none cursor-pointer"}>
                 <CardHeader>
                     <div className={"rounded-full bg-neutral-200 w-fit box-border p-3"}>
                         <NewspaperIcon className={"size-6"}/>
@@ -109,10 +111,11 @@ function Summary() {
                     </CardDescription>
                 </CardHeader>
             </Card>
-            <Card onClick={() => navigate("/alerts")} className={"md:flex-1 bg-neutral-100 shadow-none border-none cursor-pointer"}>
+            <Card onClick={() => navigate("/alerts")}
+                  className={"md:flex-1 bg-neutral-100 shadow-none border-none cursor-pointer"}>
                 <CardHeader>
                     <div className={"rounded-full bg-neutral-200 w-fit box-border p-3"}>
-                        <ExclamationTriangleIcon className={"size-6"} />
+                        <ExclamationTriangleIcon className={"size-6"}/>
                     </div>
                     <CardTitle className={"pt-3"}>Title</CardTitle>
                     <CardDescription>
@@ -187,6 +190,7 @@ function Portfolio() {
             const holdings = await portfolioHttpService.getPortfolioHoldings();
             setHoldings(holdings);
         }
+
         fetchInitialData().then();
     }, []);
 
@@ -211,91 +215,103 @@ function Portfolio() {
             }));
             setAssetHoldings(assets);
         }
+
         fetchInitialData().then();
     }, [holdings]);
 
     return (
-        <div className={"flex flex-col gap-5 items-end"}>
-            <HoldingCreator onSubmit={onAddHolding}></HoldingCreator>
-            <Table className={"mb-5"}>
-                <TableHeader>
-                    <TableRow>
-                        <TableHead className="w-[100px]">Ticker</TableHead>
-                        <TableHead>Shares</TableHead>
-                        <TableHead>Value per share</TableHead>
-                        <TableHead>Total value</TableHead>
-                        <TableHead>Last decision</TableHead>
-                        <TableHead className="text-right">Change (%)</TableHead>
-                        <TableHead colSpan={1}></TableHead>
-                    </TableRow>
-                </TableHeader>
-                <TableBody>
-                    {assetHoldings.map(holding => {
-                        const difference = percentageChange(holding.valueShare, holding.buyPrice);
-                        return (
-                            <TableRow key={holding.assetId} className={""}>
-                                <TableCell>
-                                    <span className={'text-neutral-400'}>{holding.mic}</span>
-                                    <span className="ps-2 font-medium">{holding.ticker}</span>
-                                </TableCell>
-                                <TableCell>{holding.shares}</TableCell>
-                                <TableCell>{toUSD(holding.valueShare)}</TableCell>
-                                <TableCell>{toUSD(holding.valueShare * holding.shares)}</TableCell>
-                                <TableCell>
-                                    <TooltipProvider>
-                                        <Tooltip>
-                                            <TooltipTrigger>
-                                                <Badge className={`${holding.lastDecision === "BUY"
-                                                    ? "bg-green-700"
-                                                    : (holding.lastDecision === "SELL"
-                                                        ? "bg-red-700"
-                                                        : "")}`} variant={"default"}>
-                                                    {holding.lastDecision}
-                                                </Badge>
-                                            </TooltipTrigger>
-                                            <TooltipContent>
-                                                <p>{holding.lastDecisionDate.toLocaleString('en-US', {
-                                                    year: 'numeric',
-                                                    month: 'long',
-                                                    day: 'numeric',
-                                                    hour: 'numeric',
-                                                    minute: '2-digit',
-                                                    second: '2-digit',
-                                                    hour12: true,
-                                                })}</p>
-                                            </TooltipContent>
-                                        </Tooltip>
-                                    </TooltipProvider>
-                                </TableCell>
-                                <TableCell
-                                    className={`text-right font-medium ${difference.includes('-') ? 'text-red-700' : 'text-green-700'}`}>{difference}</TableCell>
-                                <TableCell>
-                                    <AssetDrawer
-                                        assetId={holding.assetId}
-                                        buyPrice={holding.buyPrice}
-                                        shares={holding.shares}
-                                        onSubmit={onUpdateHolding}
-                                        onDelete={onDeleteHolding}>
-                                        <PencilIcon className={"size-4"}></PencilIcon>
-                                    </AssetDrawer>
-                                </TableCell>
+        <>
+            <Card className={"shadow-none box-border p-5"}>
+                <div className={"flex flex-col gap-5 items-end"}>
+                    <Table>
+                        <TableHeader>
+                            <TableRow>
+                                <TableHead className="w-[100px]">Ticker</TableHead>
+                                <TableHead>Shares</TableHead>
+                                <TableHead>Value per share</TableHead>
+                                <TableHead>Total value</TableHead>
+                                <TableHead>Last decision</TableHead>
+                                <TableHead className="text-right">Change (%)</TableHead>
+                                <TableHead colSpan={1}></TableHead>
                             </TableRow>
-                        )
-                    })}
-                </TableBody>
-                <TableFooter>
-                    <TableRow>
-                        <TableCell colSpan={3}>Total</TableCell>
-                        <TableCell>{
-                            toUSD(assetHoldings
-                                .map(holding => holding.shares * holding.valueShare)
-                                .reduce((previous, current) => previous + current, 0))
-                        }</TableCell>
-                        <TableCell colSpan={3}></TableCell>
-                    </TableRow>
-                </TableFooter>
-            </Table>
-        </div>
+                        </TableHeader>
+                        <TableBody>
+                            {assetHoldings.map(holding => {
+                                const difference = percentageChange(holding.valueShare, holding.buyPrice);
+                                return (
+                                    <TableRow key={holding.assetId} className={""}>
+                                        <TableCell>
+                                            <span className={'text-neutral-400'}>{holding.mic}</span>
+                                            <span className="ps-2 font-medium">{holding.ticker}</span>
+                                        </TableCell>
+                                        <TableCell>{holding.shares}</TableCell>
+                                        <TableCell>{toUSD(holding.valueShare)}</TableCell>
+                                        <TableCell>{toUSD(holding.valueShare * holding.shares)}</TableCell>
+                                        <TableCell>
+                                            <TooltipProvider>
+                                                <Tooltip>
+                                                    <TooltipTrigger>
+                                                        <Badge className={`${holding.lastDecision === "BUY"
+                                                            ? "bg-green-700"
+                                                            : (holding.lastDecision === "SELL"
+                                                                ? "bg-red-700"
+                                                                : "")}`} variant={"default"}>
+                                                            {holding.lastDecision}
+                                                        </Badge>
+                                                    </TooltipTrigger>
+                                                    <TooltipContent>
+                                                        <p>{holding.lastDecisionDate.toLocaleString('en-US', {
+                                                            year: 'numeric',
+                                                            month: 'long',
+                                                            day: 'numeric',
+                                                            hour: 'numeric',
+                                                            minute: '2-digit',
+                                                            second: '2-digit',
+                                                            hour12: true,
+                                                        })}</p>
+                                                    </TooltipContent>
+                                                </Tooltip>
+                                            </TooltipProvider>
+                                        </TableCell>
+                                        <TableCell
+                                            className={`text-right font-medium ${difference.includes('-') ? 'text-red-700' : 'text-green-700'}`}>{difference}</TableCell>
+                                        <TableCell>
+                                            <AssetDrawer
+                                                assetId={holding.assetId}
+                                                buyPrice={holding.buyPrice}
+                                                shares={holding.shares}
+                                                onSubmit={onUpdateHolding}
+                                                onDelete={onDeleteHolding}>
+                                                <PencilIcon className={"size-4"}></PencilIcon>
+                                            </AssetDrawer>
+                                        </TableCell>
+                                    </TableRow>
+                                )
+                            })}
+                        </TableBody>
+                        <TableFooter>
+                            <TableRow>
+                                <TableCell colSpan={3}>Total</TableCell>
+                                <TableCell>{
+                                    toUSD(assetHoldings
+                                        .map(holding => holding.shares * holding.valueShare)
+                                        .reduce((previous, current) => previous + current, 0))
+                                }</TableCell>
+                                <TableCell colSpan={3}></TableCell>
+                            </TableRow>
+                        </TableFooter>
+                    </Table>
+                </div>
+            </Card>
+            <Card className={"shadow-none box-border mt-5"}>
+                <CardHeader>
+                    <CardTitle>Add new asset to portfolio</CardTitle>
+                </CardHeader>
+                <CardContent>
+                    <HoldingCreator onSubmit={onAddHolding}></HoldingCreator>
+                </CardContent>
+            </Card>
+        </>
     )
 }
 
@@ -323,7 +339,7 @@ function HoldingCreator({onSubmit}: {
     }, []);
 
     return (
-        <div className={"flex gap-3"}>
+        <div className={"flex justify-between"}>
             <Select onValueChange={value => {
                 setAsset(availableAssets.find(asset => asset.assetId === value));
             }}>
@@ -343,9 +359,10 @@ function HoldingCreator({onSubmit}: {
                     })}
                 </SelectContent>
             </Select>
-            {asset ? <AssetDrawer assetId={asset.assetId} onSubmit={onSubmit}>
-                <Button>Add holding</Button>
-            </AssetDrawer> : ""}
+            {asset && <AssetDrawer assetId={asset.assetId} onSubmit={onSubmit}>
+                <Button className={"cursor-pointer"}>Add holding</Button>
+            </AssetDrawer>}
+            {!asset && <Button disabled>Add holding</Button>}
         </div>
     )
 }
diff --git a/src/pages/webapp/Profile.tsx b/src/pages/webapp/Profile.tsx
index 6a2682d..3bb6eb6 100644
--- a/src/pages/webapp/Profile.tsx
+++ b/src/pages/webapp/Profile.tsx
@@ -23,10 +23,10 @@ export default function Profile() {
             <div className={"flex flex-row gap-5"}>
                 <div className={"flex-1"}>
                     <h2 className={"text-2xl font-medium py-6"}>Personal information</h2>
-                    <Input type="email" disabled={true} value={user.email} />
+                    <Input type="email" disabled={true} value={user.email}/>
                     <div className={"flex flex-row gap-4 mt-4"}>
-                        <Input type="firstName" disabled={true} value={user.firstName} />
-                        <Input type="lastName" disabled={true} value={user.lastName} />
+                        <Input type="firstName" disabled={true} value={user.firstName}/>
+                        <Input type="lastName" disabled={true} value={user.lastName}/>
                     </div>
                 </div>
                 <div className={"flex-1"}>
@@ -37,9 +37,9 @@ export default function Profile() {
                         variant="outline" value={user.riskLevel.toString()}
                         onValueChange={newValue => {
                             if (newValue) {
-                                setUser(user => ({...user, riskLevel: parseInt(newValue)} as User))}
-                        }
-                        }
+                                setUser(user => ({...user, riskLevel: parseInt(newValue)} as User))
+                            }
+                        }}
                     >
                         {/* TODO: Fetch risk levels from back */}
                         {[1, 2, 3, 4].map((riskLevelItem, index) => (
@@ -53,10 +53,10 @@ export default function Profile() {
                         ))}
                     </ToggleGroup>
                     <Badge className={"mt-2"} variant="secondary">
-                        { user.riskLevel === 1 && "Conservative" }
-                        { user.riskLevel === 2 && "Moderate" }
-                        { user.riskLevel === 3 && "Aggressive" }
-                        { user.riskLevel === 4 && "Very aggressive" }
+                        {user.riskLevel === 1 && "Conservative"}
+                        {user.riskLevel === 2 && "Moderate"}
+                        {user.riskLevel === 3 && "Aggressive"}
+                        {user.riskLevel === 4 && "Very aggressive"}
                     </Badge>
                 </div>
             </div>
diff --git a/src/pages/webapp/Simulation.tsx b/src/pages/webapp/Simulation.tsx
index 682bd58..0732dd1 100644
--- a/src/pages/webapp/Simulation.tsx
+++ b/src/pages/webapp/Simulation.tsx
@@ -57,12 +57,14 @@ function Simulation() {
     const [simulationConfig, setSimulationConfig] = useState<SimulationConfig>();
 
     return (
-        <>
-            <div>
+        <div className={"flex flex-row gap-5"}>
+            <div className={"flex-1"}>
                 <SimulationConfig setSimulationConfig={setSimulationConfig}/>
+            </div>
+            <div className={"flex-1"}>
                 <SimulationResults simulationConfig={simulationConfig}/>
             </div>
-        </>
+        </div>
     )
 }
 
@@ -89,70 +91,80 @@ function SimulationConfig({setSimulationConfig}: {
     }
 
     return (
-        <>
-            <div className={"mt-5"}>
-                <h2 className={"text-2xl font-medium py-6"}>Time period</h2>
-                <DatePickerRange value={dateRange} onValueChange={setDateRange}/>
-            </div>
-            <div className={"mt-5"}>
-                <h2 className={"text-2xl font-medium py-6"}>Risk profile</h2>
-                <ToggleGroup
-                    size="lg"
-                    type="single"
-                    variant="outline" value={riskLevel.toString()}
-                    onValueChange={newValue => setRiskLevel(parseInt(newValue))}
-                >
-                    {/* TODO: Fetch risk levels from back */}
-                    {[1, 2, 3, 4].map((riskLevelItem, index) => (
-                        <ToggleGroupItem
-                            key={index}
-                            value={riskLevelItem.toString()}
-                            aria-label={`Toggle risk level ${riskLevelItem}`}
-                        >
-                            {riskLevelItem}
-                        </ToggleGroupItem>
-                    ))}
-                </ToggleGroup>
-            </div>
-            <div className={"mt-5"}>
-                <h2 className={"text-2xl font-medium py-6"}>Assets selection</h2>
-                <div className={"flex gap-y-4 flex-col"}>
-                    <div className={"flex flex-row gap-4 items-center"}>
-                        <div className={"rounded-xl bg-neutral-100 w-fit box-border p-3"}>
-                            <WalletIcon className={"size-6"}/>
-                        </div>
-                        <div className={"flex-1"}>
-                            <p>Current portfolio</p>
-                            <p className={"font-light text-neutral-500 pt-1"}>All assets in your current portfolio</p>
-                        </div>
-                        <div className={"text-neutral-500"}>
-                            <Switch
-                                onCheckedChange={event => event ? addPortfolioHoldings() : removePortfolioHoldings()}/>
+        <Card className={"shadow-none box-border py-6"}>
+            <div className={"box-border p-5"}>
+                <div className={""}>
+                    <p className={"font-semibold pb-2"}>Time period</p>
+                    <DatePickerRange value={dateRange} onValueChange={setDateRange}/>
+                </div>
+                <div className={"mt-4"}>
+                    <p className={"font-semibold pb-2"}>Risk profile</p>
+                    <ToggleGroup
+                        size="lg"
+                        type="single"
+                        variant="outline" value={riskLevel.toString()}
+                        onValueChange={newValue => {
+                            if (newValue) setRiskLevel(parseInt(newValue))
+                        }}
+                    >
+                        {/* TODO: Fetch risk levels from back */}
+                        {[1, 2, 3, 4].map((riskLevelItem, index) => (
+                            <ToggleGroupItem
+                                key={index}
+                                value={riskLevelItem.toString()}
+                                aria-label={`Toggle risk level ${riskLevelItem}`}
+                            >
+                                {riskLevelItem}
+                            </ToggleGroupItem>
+                        ))}
+                    </ToggleGroup>
+                    <Badge className={"mt-2"} variant="secondary">
+                        {riskLevel === 1 && "Conservative"}
+                        {riskLevel === 2 && "Moderate"}
+                        {riskLevel === 3 && "Aggressive"}
+                        {riskLevel === 4 && "Very aggressive"}
+                    </Badge>
+                </div>
+                <div className={"mt-4"}>
+                    <p className={"font-semibold pb-2"}>Assets selection</p>
+                    <div className={"flex gap-y-4 flex-col"}>
+                        <div className={"flex flex-row gap-4 items-center"}>
+                            <div className={"rounded-xl bg-neutral-100 w-fit box-border p-3"}>
+                                <WalletIcon className={"size-6"}/>
+                            </div>
+                            <div className={"flex-1"}>
+                                <p>Current portfolio</p>
+                                <p className={"font-light text-neutral-500 pt-1"}>All assets in your current portfolio</p>
+                            </div>
+                            <div className={"text-neutral-500"}>
+                                <Switch
+                                    onCheckedChange={event => event ? addPortfolioHoldings() : removePortfolioHoldings()}/>
+                            </div>
                         </div>
                     </div>
                 </div>
+                <div className={"mt-4"}>
+                    <Button className={"block mb-2 cursor-pointer"}
+                            disabled={simulationItems.length === 0 || !dateRange}
+                            onClick={() => {
+                                if (!dateRange?.from || !dateRange?.to) return;
+                                setSimulationConfig({
+                                    fromDate: dateRange.from,
+                                    toDate: dateRange.to,
+                                    riskLevel: riskLevel,
+                                    simulationItems: simulationItems
+                                })
+                            }}>
+                        Run simulation
+                    </Button>
+                    {simulationItems.length > 0 && (
+                        <Badge variant="outline">
+                            {simulationItems.length} assets selected
+                        </Badge>
+                    )}
+                </div>
             </div>
-            <div className={"mt-10"}>
-                <Button className={"block mb-2 cursor-pointer"}
-                        disabled={simulationItems.length === 0 || !dateRange}
-                        onClick={() => {
-                            if (!dateRange?.from || !dateRange?.to) return;
-                            setSimulationConfig({
-                                fromDate: dateRange.from,
-                                toDate: dateRange.to,
-                                riskLevel: riskLevel,
-                                simulationItems: simulationItems
-                            })
-                        }}>
-                    Run simulation
-                </Button>
-                {simulationItems.length > 0 && (
-                    <Badge variant="outline">
-                        {simulationItems.length} assets selected
-                    </Badge>
-                )}
-            </div>
-        </>
+        </Card>
     )
 }
 
@@ -280,8 +292,8 @@ function SimulationResults({simulationConfig}: {
 
     return (
         <>
-            {isLoading && <LoadingLayer />}
-            {simulationConfig && <div className={"my-5"}>
+            {isLoading && <LoadingLayer/>}
+            {simulationConfig && <div>
                 <DataChart
                     data={chartData}
                     filterBy={(item) => {
@@ -346,7 +358,7 @@ function DataChart<T extends BaseChartData>
     }, [data, selectedData, filterBy]);
 
     return (
-        <Card>
+        <Card className={"shadow-none"}>
             <CardHeader className="flex items-center gap-4 space-y-0 border-b py-5 sm:flex-row flex-col">
                 <div className="grid flex-1 gap-1 text-center sm:text-left">
                     <CardTitle>Simulation result</CardTitle>