diff --git a/.github/labeler.yml b/.github/labeler.yml
new file mode 100644
index 0000000..aec966f
--- /dev/null
+++ b/.github/labeler.yml
@@ -0,0 +1,3 @@
+# Add 'triage' label to any issue that gets opened
+triage:
+  - '/.*/'
diff --git a/.github/workflows/labeler.yml b/.github/workflows/labeler.yml
new file mode 100644
index 0000000..bde5f72
--- /dev/null
+++ b/.github/workflows/labeler.yml
@@ -0,0 +1,18 @@
+name: "Issue Labeler"
+on:
+  issues:
+    types: [opened]
+
+permissions:
+  issues: write
+  contents: read
+
+jobs:
+  triage:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: github/issue-labeler@v3.4
+        with:
+          configuration-path: .github/labeler.yml
+          enable-versioned-regex: 0
+          repo-token: ${{ github.token }}
diff --git a/app/HasOwningTeam.php b/app/HasOwningTeam.php
new file mode 100644
index 0000000..464dc54
--- /dev/null
+++ b/app/HasOwningTeam.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace App;
+
+use App\Models\Scopes\TeamScope;
+use App\Models\Team;
+
+trait HasOwningTeam
+{
+    protected static function bootHasOwningTeam(): void
+    {
+        static::addGlobalScope(new TeamScope());
+
+        static::creating(function ($model) {
+            $model->team_id = auth()->user()->currentTeam->id;
+        });
+    }
+
+    public function team()
+    {
+        return $this->belongsTo(Team::class, 'team_id');
+    }
+}
diff --git a/app/Http/Controllers/NodeController.php b/app/Http/Controllers/NodeController.php
new file mode 100644
index 0000000..9cf2262
--- /dev/null
+++ b/app/Http/Controllers/NodeController.php
@@ -0,0 +1,69 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Http\Requests\StoreNodeRequest;
+use App\Http\Requests\UpdateNodeRequest;
+use App\Models\Node;
+use Inertia\Inertia;
+
+class NodeController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     */
+    public function index()
+    {
+        return Inertia::render('Nodes/Index');
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     */
+    public function create()
+    {
+        return Inertia::render('Nodes/Create');
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     */
+    public function store(StoreNodeRequest $request)
+    {
+        $node = Node::create($request->all());
+
+        return to_route('nodes.show', ['node' => $node->id]);
+    }
+
+    /**
+     * Display the specified resource.
+     */
+    public function show(Node $node)
+    {
+        return Inertia::render('Nodes/Show', ['node' => $node]);
+    }
+
+    /**
+     * Show the form for editing the specified resource.
+     */
+    public function edit(Node $node)
+    {
+        //
+    }
+
+    /**
+     * Update the specified resource in storage.
+     */
+    public function update(UpdateNodeRequest $request, Node $node)
+    {
+        //
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     */
+    public function destroy(Node $node)
+    {
+        //
+    }
+}
diff --git a/app/Http/Controllers/SwarmController.php b/app/Http/Controllers/SwarmController.php
new file mode 100644
index 0000000..57f1f2a
--- /dev/null
+++ b/app/Http/Controllers/SwarmController.php
@@ -0,0 +1,66 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Http\Requests\StoreSwarmRequest;
+use App\Http\Requests\UpdateSwarmRequest;
+use App\Models\Swarm;
+
+class SwarmController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     */
+    public function index()
+    {
+        //
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     */
+    public function create()
+    {
+        //
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     */
+    public function store(StoreSwarmRequest $request)
+    {
+        //
+    }
+
+    /**
+     * Display the specified resource.
+     */
+    public function show(Swarm $swarm)
+    {
+        //
+    }
+
+    /**
+     * Show the form for editing the specified resource.
+     */
+    public function edit(Swarm $swarm)
+    {
+        //
+    }
+
+    /**
+     * Update the specified resource in storage.
+     */
+    public function update(UpdateSwarmRequest $request, Swarm $swarm)
+    {
+        //
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     */
+    public function destroy(Swarm $swarm)
+    {
+        //
+    }
+}
diff --git a/app/Http/Middleware/NodeAuth.php b/app/Http/Middleware/NodeAuth.php
new file mode 100644
index 0000000..67ab0ab
--- /dev/null
+++ b/app/Http/Middleware/NodeAuth.php
@@ -0,0 +1,37 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use App\Models\Node;
+use Closure;
+use Illuminate\Http\Request;
+use Symfony\Component\HttpFoundation\Response;
+
+class NodeAuth
+{
+    const AUTH_HEADER = 'x-node-token';
+
+    /**
+     * Handle an incoming request.
+     *
+     * @param  \Closure(\Illuminate\Http\Request): (\Symfony\Component\HttpFoundation\Response)  $next
+     */
+    public function handle(Request $request, Closure $next): Response
+    {
+        $token = $request->header(self::AUTH_HEADER);
+
+        if (!$token) {
+            return response()->json([
+                'message' => 'Unauthorized'
+            ], 401);
+        }
+
+        $node = Node::whereAgentToken($token)->firstOrFail();
+
+        $node->last_seen_at = now();
+
+        $node->save();
+
+        return $next($request);
+    }
+}
diff --git a/app/Http/Requests/StoreNodeRequest.php b/app/Http/Requests/StoreNodeRequest.php
new file mode 100644
index 0000000..9d23707
--- /dev/null
+++ b/app/Http/Requests/StoreNodeRequest.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class StoreNodeRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     */
+    public function authorize(): bool
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array<string, \Illuminate\Contracts\Validation\ValidationRule|array<mixed>|string>
+     */
+    public function rules(): array
+    {
+        return [
+            'name' => ['required', 'string', 'max:255'],
+        ];
+    }
+}
diff --git a/app/Http/Requests/StoreSwarmRequest.php b/app/Http/Requests/StoreSwarmRequest.php
new file mode 100644
index 0000000..8df9ac0
--- /dev/null
+++ b/app/Http/Requests/StoreSwarmRequest.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class StoreSwarmRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     */
+    public function authorize(): bool
+    {
+        return false;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array<string, \Illuminate\Contracts\Validation\ValidationRule|array<mixed>|string>
+     */
+    public function rules(): array
+    {
+        return [
+            //
+        ];
+    }
+}
diff --git a/app/Http/Requests/UpdateNodeRequest.php b/app/Http/Requests/UpdateNodeRequest.php
new file mode 100644
index 0000000..86ccda5
--- /dev/null
+++ b/app/Http/Requests/UpdateNodeRequest.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class UpdateNodeRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     */
+    public function authorize(): bool
+    {
+        return false;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array<string, \Illuminate\Contracts\Validation\ValidationRule|array<mixed>|string>
+     */
+    public function rules(): array
+    {
+        return [
+            //
+        ];
+    }
+}
diff --git a/app/Http/Requests/UpdateSwarmRequest.php b/app/Http/Requests/UpdateSwarmRequest.php
new file mode 100644
index 0000000..0831e1a
--- /dev/null
+++ b/app/Http/Requests/UpdateSwarmRequest.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class UpdateSwarmRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     */
+    public function authorize(): bool
+    {
+        return false;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array<string, \Illuminate\Contracts\Validation\ValidationRule|array<mixed>|string>
+     */
+    public function rules(): array
+    {
+        return [
+            //
+        ];
+    }
+}
diff --git a/app/Models/Node.php b/app/Models/Node.php
new file mode 100644
index 0000000..bbceaf6
--- /dev/null
+++ b/app/Models/Node.php
@@ -0,0 +1,35 @@
+<?php
+
+namespace App\Models;
+
+use App\HasOwningTeam;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Str;
+
+class Node extends Model
+{
+    use HasFactory;
+    use HasOwningTeam;
+
+    protected $fillable = [
+        'name',
+    ];
+
+    protected $appends = [
+        'online',
+    ];
+
+    protected static function booted()
+    {
+        self::creating(function (Node $node) {
+            $node->agent_token = Str::random(42);
+        });
+    }
+
+    public function getOnlineAttribute()
+    {
+        return $this->last_seen_at > now()->subSeconds(35);
+    }
+}
diff --git a/app/Models/Scopes/TeamScope.php b/app/Models/Scopes/TeamScope.php
new file mode 100644
index 0000000..6af67d5
--- /dev/null
+++ b/app/Models/Scopes/TeamScope.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\Models\Scopes;
+
+use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Scope;
+
+class TeamScope implements Scope
+{
+    /**
+     * Apply the scope to a given Eloquent query builder.
+     */
+    public function apply(Builder $builder, Model $model): void
+    {
+        $builder->where('team_id', auth()->user()->currentTeam->id);
+    }
+}
diff --git a/app/Models/Swarm.php b/app/Models/Swarm.php
new file mode 100644
index 0000000..1a4f292
--- /dev/null
+++ b/app/Models/Swarm.php
@@ -0,0 +1,11 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class Swarm extends Model
+{
+    use HasFactory;
+}
diff --git a/app/Policies/NodePolicy.php b/app/Policies/NodePolicy.php
new file mode 100644
index 0000000..34c85a1
--- /dev/null
+++ b/app/Policies/NodePolicy.php
@@ -0,0 +1,66 @@
+<?php
+
+namespace App\Policies;
+
+use App\Models\Node;
+use App\Models\User;
+use Illuminate\Auth\Access\Response;
+
+class NodePolicy
+{
+    /**
+     * Determine whether the user can view any models.
+     */
+    public function viewAny(User $user): bool
+    {
+        return true;
+    }
+
+    /**
+     * Determine whether the user can view the model.
+     */
+    public function view(User $user, Node $node): bool
+    {
+        return $user->belongsToTeam($node->team);
+    }
+
+    /**
+     * Determine whether the user can create models.
+     */
+    public function create(User $user): bool
+    {
+        return true;
+    }
+
+    /**
+     * Determine whether the user can update the model.
+     */
+    public function update(User $user, Node $node): bool
+    {
+        return $user->belongsToTeam($node->team);
+    }
+
+    /**
+     * Determine whether the user can delete the model.
+     */
+    public function delete(User $user, Node $node): bool
+    {
+        return $user->belongsToTeam($node->team);
+    }
+
+    /**
+     * Determine whether the user can restore the model.
+     */
+    public function restore(User $user, Node $node): bool
+    {
+        return $user->belongsToTeam($node->team);
+    }
+
+    /**
+     * Determine whether the user can permanently delete the model.
+     */
+    public function forceDelete(User $user, Node $node): bool
+    {
+        return $user->belongsToTeam($node->team);
+    }
+}
diff --git a/app/Policies/SwarmPolicy.php b/app/Policies/SwarmPolicy.php
new file mode 100644
index 0000000..622fde3
--- /dev/null
+++ b/app/Policies/SwarmPolicy.php
@@ -0,0 +1,66 @@
+<?php
+
+namespace App\Policies;
+
+use App\Models\Swarm;
+use App\Models\User;
+use Illuminate\Auth\Access\Response;
+
+class SwarmPolicy
+{
+    /**
+     * Determine whether the user can view any models.
+     */
+    public function viewAny(User $user): bool
+    {
+        //
+    }
+
+    /**
+     * Determine whether the user can view the model.
+     */
+    public function view(User $user, Swarm $swarm): bool
+    {
+        //
+    }
+
+    /**
+     * Determine whether the user can create models.
+     */
+    public function create(User $user): bool
+    {
+        //
+    }
+
+    /**
+     * Determine whether the user can update the model.
+     */
+    public function update(User $user, Swarm $swarm): bool
+    {
+        //
+    }
+
+    /**
+     * Determine whether the user can delete the model.
+     */
+    public function delete(User $user, Swarm $swarm): bool
+    {
+        //
+    }
+
+    /**
+     * Determine whether the user can restore the model.
+     */
+    public function restore(User $user, Swarm $swarm): bool
+    {
+        //
+    }
+
+    /**
+     * Determine whether the user can permanently delete the model.
+     */
+    public function forceDelete(User $user, Swarm $swarm): bool
+    {
+        //
+    }
+}
diff --git a/database/factories/NodeFactory.php b/database/factories/NodeFactory.php
new file mode 100644
index 0000000..c45c940
--- /dev/null
+++ b/database/factories/NodeFactory.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace Database\Factories;
+
+use Illuminate\Database\Eloquent\Factories\Factory;
+
+/**
+ * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\Node>
+ */
+class NodeFactory extends Factory
+{
+    /**
+     * Define the model's default state.
+     *
+     * @return array<string, mixed>
+     */
+    public function definition(): array
+    {
+        return [
+            //
+        ];
+    }
+}
diff --git a/database/factories/SwarmFactory.php b/database/factories/SwarmFactory.php
new file mode 100644
index 0000000..83e9c92
--- /dev/null
+++ b/database/factories/SwarmFactory.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace Database\Factories;
+
+use Illuminate\Database\Eloquent\Factories\Factory;
+
+/**
+ * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\Swarm>
+ */
+class SwarmFactory extends Factory
+{
+    /**
+     * Define the model's default state.
+     *
+     * @return array<string, mixed>
+     */
+    public function definition(): array
+    {
+        return [
+            //
+        ];
+    }
+}
diff --git a/database/migrations/2024_06_19_084206_create_swarms_table.php b/database/migrations/2024_06_19_084206_create_swarms_table.php
new file mode 100644
index 0000000..67033a1
--- /dev/null
+++ b/database/migrations/2024_06_19_084206_create_swarms_table.php
@@ -0,0 +1,30 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('swarms', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('team_id')->constrained()->cascadeOnDelete();
+            $table->string('name');
+            $table->string('ext_id')->nullable();
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('swarms');
+    }
+};
diff --git a/database/migrations/2024_06_19_084441_create_nodes_table.php b/database/migrations/2024_06_19_084441_create_nodes_table.php
new file mode 100644
index 0000000..a97db34
--- /dev/null
+++ b/database/migrations/2024_06_19_084441_create_nodes_table.php
@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('nodes', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('team_id')->constrained()->cascadeOnDelete();
+            $table->string('name');
+            $table->string('agent_token')->unique();
+            $table->string('ext_id')->nullable();
+            $table->timestamp('last_seen_at')->nullable();
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('nodes');
+    }
+};
diff --git a/package-lock.json b/package-lock.json
index 25ee32c..4038257 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,7 @@
     "packages": {
         "": {
             "devDependencies": {
+                "@formkit/auto-animate": "^0.8.2",
                 "@inertiajs/vue3": "^1.0.14",
                 "@tailwindcss/forms": "^0.5.7",
                 "@tailwindcss/typography": "^0.5.10",
@@ -12,6 +13,7 @@
                 "@vue/server-renderer": "^3.3.13",
                 "autoprefixer": "^10.4.16",
                 "axios": "^1.6.4",
+                "flowbite": "^2.3.0",
                 "laravel-vite-plugin": "^1.0",
                 "postcss": "^8.4.32",
                 "tailwindcss": "^3.4.0",
@@ -411,6 +413,12 @@
                 "node": ">=12"
             }
         },
+        "node_modules/@formkit/auto-animate": {
+            "version": "0.8.2",
+            "resolved": "https://registry.npmjs.org/@formkit/auto-animate/-/auto-animate-0.8.2.tgz",
+            "integrity": "sha512-SwPWfeRa5veb1hOIBMdzI+73te5puUBHmqqaF1Bu7FjvxlYSz/kJcZKSa9Cg60zL0uRNeJL2SbRxV6Jp6Q1nFQ==",
+            "dev": true
+        },
         "node_modules/@inertiajs/core": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/@inertiajs/core/-/core-1.2.0.tgz",
@@ -547,6 +555,16 @@
                 "node": ">=14"
             }
         },
+        "node_modules/@popperjs/core": {
+            "version": "2.11.8",
+            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+            "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+            "dev": true,
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/popperjs"
+            }
+        },
         "node_modules/@rollup/rollup-android-arm-eabi": {
             "version": "4.18.0",
             "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.0.tgz",
@@ -1430,6 +1448,16 @@
                 "node": ">=8"
             }
         },
+        "node_modules/flowbite": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/flowbite/-/flowbite-2.3.0.tgz",
+            "integrity": "sha512-pm3JRo8OIJHGfFYWgaGpPv8E+UdWy0Z3gEAGufw+G/1dusaU/P1zoBLiQpf2/+bYAi+GBQtPVG86KYlV0W+AFQ==",
+            "dev": true,
+            "dependencies": {
+                "@popperjs/core": "^2.9.3",
+                "mini-svg-data-uri": "^1.4.3"
+            }
+        },
         "node_modules/follow-redirects": {
             "version": "1.15.6",
             "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
diff --git a/package.json b/package.json
index ed8d8b7..80853ae 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
         "build": "vite build && vite build --ssr"
     },
     "devDependencies": {
+        "@formkit/auto-animate": "^0.8.2",
         "@inertiajs/vue3": "^1.0.14",
         "@tailwindcss/forms": "^0.5.7",
         "@tailwindcss/typography": "^0.5.10",
@@ -13,6 +14,7 @@
         "@vue/server-renderer": "^3.3.13",
         "autoprefixer": "^10.4.16",
         "axios": "^1.6.4",
+        "flowbite": "^2.3.0",
         "laravel-vite-plugin": "^1.0",
         "postcss": "^8.4.32",
         "tailwindcss": "^3.4.0",
diff --git a/resources/js/Components/InputError.vue b/resources/js/Components/InputError.vue
index 47ddb27..a848bdc 100644
--- a/resources/js/Components/InputError.vue
+++ b/resources/js/Components/InputError.vue
@@ -5,7 +5,7 @@ defineProps({
 </script>
 
 <template>
-    <div v-show="message">
+    <div v-if="message">
         <p class="text-sm text-red-600 dark:text-red-400">
             {{ message }}
         </p>
diff --git a/resources/js/Components/LayoutTab.vue b/resources/js/Components/LayoutTab.vue
new file mode 100644
index 0000000..5b3abfe
--- /dev/null
+++ b/resources/js/Components/LayoutTab.vue
@@ -0,0 +1,30 @@
+<script setup>
+
+import {defineComponent, defineProps, computed} from "vue";
+import { Link , router } from '@inertiajs/vue3';
+
+window.r = router;
+
+const props = defineProps({
+    // active: Boolean,
+    href: String,
+})
+
+const classes = computed(() => props.href.endsWith(router.page.url)
+    ? 'inline-flex items-center justify-center p-4 text-blue-600 border-b-2 border-blue-600 rounded-t-lg active dark:text-blue-500 dark:border-blue-500 group'
+    : 'inline-flex items-center justify-center p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 group'
+)
+
+</script>
+
+<template>
+    <li class="me-2">
+        <Link :href="$props.href" :class="classes">
+            <div class="me-2">
+                <slot name="icon" />
+            </div>
+
+            <slot name="title" />
+        </Link>
+    </li>
+</template>
diff --git a/resources/js/Layouts/AppLayout.vue b/resources/js/Layouts/AppLayout.vue
index 654a6f7..18a495b 100644
--- a/resources/js/Layouts/AppLayout.vue
+++ b/resources/js/Layouts/AppLayout.vue
@@ -7,6 +7,7 @@ import Dropdown from '@/Components/Dropdown.vue';
 import DropdownLink from '@/Components/DropdownLink.vue';
 import NavLink from '@/Components/NavLink.vue';
 import ResponsiveNavLink from '@/Components/ResponsiveNavLink.vue';
+import PrimaryButton from "@/Components/PrimaryButton.vue";
 
 defineProps({
     title: String,
@@ -51,6 +52,9 @@ const logout = () => {
                                 <NavLink :href="route('dashboard')" :active="route().current('dashboard')">
                                     Dashboard
                                 </NavLink>
+                                <NavLink :href="route('nodes.index')" :active="route().current('nodes.index')">
+                                    Nodes
+                                </NavLink>
                             </div>
                         </div>
 
@@ -194,6 +198,10 @@ const logout = () => {
                         <ResponsiveNavLink :href="route('dashboard')" :active="route().current('dashboard')">
                             Dashboard
                         </ResponsiveNavLink>
+
+                        <ResponsiveNavLink :href="route('nodes.index')" :active="route().current('nodes.index')">
+                            Nodes
+                        </ResponsiveNavLink>
                     </div>
 
                     <!-- Responsive Settings Options -->
@@ -274,9 +282,45 @@ const logout = () => {
             </nav>
 
             <!-- Page Heading -->
-            <header v-if="$slots.header" class="bg-white dark:bg-gray-800 shadow">
-                <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
-                    <slot name="header" />
+            <header v-if="$slots.header || $slots.actions" class="bg-white dark:bg-gray-800 shadow">
+                <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8 flex justify-between">
+                    <div>
+                        <slot name="header" />
+                    </div>
+                    <div class="flex gap-4">
+                        <slot name="actions" />
+                    </div>
+                </div>
+
+                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 border-t border-gray-200 dark:border-gray-700">
+                    <ul class="flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400">
+                        <slot name="tabs" />
+
+<!--                        <li class="me-2">-->
+<!--                            <a href="#" class="inline-flex items-center justify-center p-4 text-blue-600 border-b-2 border-blue-600 rounded-t-lg active dark:text-blue-500 dark:border-blue-500 group" aria-current="page">-->
+<!--                                <svg class="w-4 h-4 me-2 text-blue-600 dark:text-blue-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 18">-->
+<!--                                    <path d="M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z"/>-->
+<!--                                </svg>Dashboard-->
+<!--                            </a>-->
+<!--                        </li>-->
+<!--                        <li class="me-2">-->
+<!--                            <a href="#" class="inline-flex items-center justify-center p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 group">-->
+<!--                                <svg class="w-4 h-4 me-2 text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">-->
+<!--                                    <path d="M5 11.424V1a1 1 0 1 0-2 0v10.424a3.228 3.228 0 0 0 0 6.152V19a1 1 0 1 0 2 0v-1.424a3.228 3.228 0 0 0 0-6.152ZM19.25 14.5A3.243 3.243 0 0 0 17 11.424V1a1 1 0 0 0-2 0v10.424a3.227 3.227 0 0 0 0 6.152V19a1 1 0 1 0 2 0v-1.424a3.243 3.243 0 0 0 2.25-3.076Zm-6-9A3.243 3.243 0 0 0 11 2.424V1a1 1 0 0 0-2 0v1.424a3.228 3.228 0 0 0 0 6.152V19a1 1 0 1 0 2 0V8.576A3.243 3.243 0 0 0 13.25 5.5Z"/>-->
+<!--                                </svg>Settings-->
+<!--                            </a>-->
+<!--                        </li>-->
+<!--                        <li class="me-2">-->
+<!--                            <a href="#" class="inline-flex items-center justify-center p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 group">-->
+<!--                                <svg class="w-4 h-4 me-2 text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">-->
+<!--                                    <path d="M16 1h-3.278A1.992 1.992 0 0 0 11 0H7a1.993 1.993 0 0 0-1.722 1H2a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2Zm-3 14H5a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0-4H5a1 1 0 0 1 0-2h8a1 1 0 1 1 0 2Zm0-5H5a1 1 0 0 1 0-2h2V2h4v2h2a1 1 0 1 1 0 2Z"/>-->
+<!--                                </svg>Contacts-->
+<!--                            </a>-->
+<!--                        </li>-->
+<!--                        <li>-->
+<!--                            <a class="inline-block p-4 text-gray-400 rounded-t-lg cursor-not-allowed dark:text-gray-500">Disabled</a>-->
+<!--                        </li>-->
+                    </ul>
                 </div>
             </header>
 
diff --git a/resources/js/Pages/Nodes/Create.vue b/resources/js/Pages/Nodes/Create.vue
new file mode 100644
index 0000000..2410c03
--- /dev/null
+++ b/resources/js/Pages/Nodes/Create.vue
@@ -0,0 +1,121 @@
+<script setup>
+import AppLayout from '@/Layouts/AppLayout.vue';
+import PrimaryButton from "@/Components/PrimaryButton.vue";
+import ActionSection from "@/Components/ActionSection.vue";
+import TextInput from "@/Components/TextInput.vue";
+import {onMounted, ref} from "vue";
+import InputLabel from "@/Components/InputLabel.vue";
+import {router, useForm} from "@inertiajs/vue3";
+import InputError from "@/Components/InputError.vue";
+import FormSection from "@/Components/FormSection.vue";
+
+const form = useForm({
+    name: '',
+    // swarm_option: 'init',
+    // swarm_init: {
+    //     listen_addr: '',
+    //     advertise_addr: '',
+    //     force_new_cluster: false
+    // }
+});
+
+const createNode = () => {
+    form.post(route('nodes.store'), {
+        // errorBag: 'updateProfileInformation',
+        // preserveScroll: true,
+        // onSuccess: (response) => {
+        //     console.log('RESPONSE', response);
+        //     // router.visit(route('nodes.show', {id: 1}))
+        // }
+    });
+};
+</script>
+
+<template>
+    <AppLayout title="Dashboard">
+        <template #header>
+            <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+                Create Node
+            </h2>
+        </template>
+
+        <div class="py-12">
+            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+                <FormSection @submitted="createNode">
+                    <template #title>
+                        Server Details
+                    </template>
+
+                    <template #description>
+                        How your server will be represented in our system.
+                    </template>
+
+                    <template #form>
+                        <div class="col-span-6">
+                            <div class="flex items-center mt-2">
+                                <img class="object-cover w-12 h-12 rounded-full" :src="'https://ui-avatars.com/api/?name=' + encodeURIComponent($page.props.auth.user.current_team.name) + '&color=7F9CF5&background=EBF4FF'" :alt="$page.props.auth.user.current_team.name">
+
+                                <div class="ms-4 leading-tight">
+                                    <div class="text-gray-900 dark:text-white">{{ $page.props.auth.user.current_team.name }}</div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="col-span-6 sm:col-span-4" v-auto-animate>
+                            <InputLabel for="server_name" value="Server Name" />
+                            <TextInput id="server_name"
+                                       v-model="form.name"
+                                       autofocus
+                                       class="block w-full mt-1"
+                            />
+                            <InputError :message="form.errors.name" class="mt-2" />
+                        </div>
+                    </template>
+
+                    <template #actions>
+                        <PrimaryButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
+                            Create Node
+                        </PrimaryButton>
+                    </template>
+                </FormSection>
+
+<!--                    <ActionSection>-->
+<!--                        <template #title>-->
+<!--                            Swarm Cluster-->
+<!--                        </template>-->
+
+<!--                        <template #description>-->
+<!--                            Select either to initialize a new cluster or join an existing cluster.-->
+<!--                        </template>-->
+
+<!--                        <template #content>-->
+<!--                            <div v-auto-animate>-->
+<!--                                <ul class="items-center w-full text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg sm:flex dark:bg-gray-700 dark:border-gray-600 dark:text-white">-->
+<!--                                    <li class="w-full border-b border-gray-200 sm:border-b-0 sm:border-r dark:border-gray-600">-->
+<!--                                        <div class="flex items-center ps-3">-->
+<!--                                            <input id="swarm-init-option" v-model="form.swarm_option" type="radio" value="init" name="list-radio" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500">-->
+<!--                                            <label for="swarm-init-option" class="w-full py-3 ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Initialize Cluster</label>-->
+<!--                                        </div>-->
+<!--                                    </li>-->
+<!--                                    <li class="w-full border-b border-gray-200 sm:border-b-0 sm:border-r dark:border-gray-600">-->
+<!--                                        <div class="flex items-center ps-3">-->
+<!--                                            <input id="swarm-join-option" v-model="form.swarm_option" type="radio" value="join" name="list-radio" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500">-->
+<!--                                            <label for="swarm-join-option" class="w-full py-3 ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Join Swarm</label>-->
+<!--                                        </div>-->
+<!--                                    </li>-->
+<!--                                </ul>-->
+
+<!--                                <div v-if="form.swarm_option === 'init'">-->
+<!--                                    Select IP-->
+<!--                                </div>-->
+
+<!--                                <div v-if="form.swarm_option === 'join'">-->
+<!--                                    Unfortunately, this feature is not implemented yet.-->
+<!--                                </div>-->
+<!--                            </div>-->
+<!--                        </template>-->
+<!--                    </ActionSection>-->
+            </div>
+        </div>
+    </AppLayout>
+</template>
diff --git a/resources/js/Pages/Nodes/Index.vue b/resources/js/Pages/Nodes/Index.vue
new file mode 100644
index 0000000..ed85787
--- /dev/null
+++ b/resources/js/Pages/Nodes/Index.vue
@@ -0,0 +1,28 @@
+<script setup>
+import { router } from '@inertiajs/vue3'
+
+import AppLayout from '@/Layouts/AppLayout.vue';
+import PrimaryButton from "@/Components/PrimaryButton.vue";
+</script>
+
+<template>
+    <AppLayout title="Dashboard">
+        <template #header>
+            <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+                Nodes
+            </h2>
+        </template>
+
+        <template #actions>
+            <PrimaryButton type="button" @click="router.get(route('nodes.create'))">Create</PrimaryButton>
+        </template>
+
+        <div class="py-12">
+            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-xl sm:rounded-lg">
+                    list nodes here
+                </div>
+            </div>
+        </div>
+    </AppLayout>
+</template>
diff --git a/resources/js/Pages/Nodes/Partials/AgentInstall.vue b/resources/js/Pages/Nodes/Partials/AgentInstall.vue
new file mode 100644
index 0000000..fdd94c8
--- /dev/null
+++ b/resources/js/Pages/Nodes/Partials/AgentInstall.vue
@@ -0,0 +1,73 @@
+<script setup>
+import {onMounted, ref, reactive} from "vue";
+import {CopyClipboard} from 'flowbite';
+import InputLabel from "@/Components/InputLabel.vue";
+
+const trigger = ref(null);
+const copyToClipboardRef = ref(null);
+
+const showSuccessMessage = ref(false);
+
+onMounted(() => {
+  const clipboard = new CopyClipboard(trigger.value, copyToClipboardRef.value);
+
+  clipboard.updateOnCopyCallback((clipboard) => {
+    showSuccess();
+
+    // reset to default state
+    setTimeout(() => {
+      resetToDefault();
+    }, 2000);
+  })
+
+  const showSuccess = () => {
+    showSuccessMessage.value = true;
+  }
+
+  const resetToDefault = () => {
+    showSuccessMessage.value = false;
+  }
+
+})
+</script>
+
+<template>
+  <div class="w-full">
+      <InputLabel for="agent-install-cli">Execute this script in your server's console to install an Agent</InputLabel>
+    <div class="relative">
+
+      <div class="relative">
+        <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
+          <svg class="w-4 h-4 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 17.345a4.76 4.76 0 0 0 2.558 1.618c2.274.589 4.512-.446 4.999-2.31.487-1.866-1.273-3.9-3.546-4.49-2.273-.59-4.034-2.623-3.547-4.488.486-1.865 2.724-2.899 4.998-2.31.982.236 1.87.793 2.538 1.592m-3.879 12.171V21m0-18v2.2"/>
+          </svg>
+        </div>
+        <input id="agent-install-cli" ref="copyToClipboardRef" type="text"
+               class="ps-10 p-2.5  col-span-6 bg-gray-50 border border-gray-300 text-gray-500 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full px-2.5 py-4 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500"
+               value="script cli goes here" disabled readonly>
+      </div>
+      <button ref="trigger"
+              class="absolute end-2.5 w-24 top-1/2 -translate-y-1/2 text-gray-900 dark:text-gray-400 hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-600 dark:hover:bg-gray-700 rounded-lg py-2 px-2.5 inline-flex items-center justify-center bg-white border-gray-200 border">
+        <span v-auto-animate>
+            <span  v-if="!showSuccessMessage" id="default-message" class="inline-flex items-center">
+                <svg class="w-3 h-3 me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
+                     viewBox="0 0 18 20">
+                    <path
+                        d="M16 1h-3.278A1.992 1.992 0 0 0 11 0H7a1.993 1.993 0 0 0-1.722 1H2a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2Zm-3 14H5a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0-4H5a1 1 0 0 1 0-2h8a1 1 0 1 1 0 2Zm0-5H5a1 1 0 0 1 0-2h2V2h4v2h2a1 1 0 1 1 0 2Z"/>
+                </svg>
+                <span class="text-xs font-semibold">Copy</span>
+            </span>
+
+        <span  v-if="showSuccessMessage" id="success-message" class="inline-flex whitespace-nowrap items-center">
+                <svg class="w-3 h-3 text-blue-700 dark:text-blue-500 me-1.5" aria-hidden="true"
+                     xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12">
+                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                          d="M1 5.917 5.724 10.5 15 1.5"/>
+                </svg>
+                <span class="text-xs font-semibold text-blue-700 dark:text-blue-500">Copied</span>
+                    </span>
+          </span>
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/resources/js/Pages/Nodes/Partials/AgentStatus.vue b/resources/js/Pages/Nodes/Partials/AgentStatus.vue
new file mode 100644
index 0000000..b70d11d
--- /dev/null
+++ b/resources/js/Pages/Nodes/Partials/AgentStatus.vue
@@ -0,0 +1,30 @@
+
+<script setup>
+import PrimaryButton from "@/Components/PrimaryButton.vue";
+import AgentInstall from "@/Pages/Nodes/Partials/AgentInstall.vue";
+import FormSection from "@/Components/FormSection.vue";
+
+defineProps([
+    'node'
+])
+</script>
+<template>
+<FormSection>
+<template #title>
+  Agent Status
+
+</template>
+
+<template #form>
+  <div v-if="$props.node.online">
+  </div>
+  <div v-else class="col-span-10">
+    <AgentInstall />
+  </div>
+</template>
+
+<template #actions>
+  <PrimaryButton type="button">Upgrade to 1.1.1</PrimaryButton>
+</template>
+</FormSection>
+</template>
\ No newline at end of file
diff --git a/resources/js/Pages/Nodes/Partials/NewSwarmCluster.vue b/resources/js/Pages/Nodes/Partials/NewSwarmCluster.vue
new file mode 100644
index 0000000..6e93d80
--- /dev/null
+++ b/resources/js/Pages/Nodes/Partials/NewSwarmCluster.vue
@@ -0,0 +1,57 @@
+<script setup>
+import {router, useForm} from "@inertiajs/vue3";
+import PrimaryButton from "@/Components/PrimaryButton.vue";
+import FormSection from "@/Components/FormSection.vue";
+
+const form = useForm({
+    swarm_option: 'init',
+    swarm_init: {
+        listen_addr: '',
+        advertise_addr: '',
+        force_new_cluster: false
+    }
+})
+</script>
+
+<template>
+    <FormSection>
+        <template #title>
+            Swarm Cluster
+        </template>
+
+        <template #description>
+            Select either to initialize a new cluster or join an existing cluster.
+        </template>
+
+        <template #form>
+            <div v-auto-animate class="col-span-6">
+                <ul class="items-center w-full text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg sm:flex dark:bg-gray-700 dark:border-gray-600 dark:text-white">
+                    <li class="w-full border-b border-gray-200 sm:border-b-0 sm:border-r dark:border-gray-600">
+                        <div class="flex items-center ps-3">
+                            <input id="swarm-init-option" v-model="form.swarm_option" type="radio" value="init" name="list-radio" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500">
+                            <label for="swarm-init-option" class="w-full py-3 ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Initialize Cluster</label>
+                        </div>
+                    </li>
+                    <li class="w-full border-b border-gray-200 sm:border-b-0 sm:border-r dark:border-gray-600">
+                        <div class="flex items-center ps-3">
+                            <input id="swarm-join-option" v-model="form.swarm_option" type="radio" value="join" name="list-radio" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500">
+                            <label for="swarm-join-option" class="w-full py-3 ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Join an Existing Cluster</label>
+                        </div>
+                    </li>
+                </ul>
+
+                <div v-if="form.swarm_option === 'init'">
+                    Select IP
+                </div>
+
+                <div v-if="form.swarm_option === 'join'">
+                    Unfortunately, this feature is not implemented yet.
+                </div>
+            </div>
+        </template>
+
+        <template #actions>
+            <PrimaryButton type="submit">Initialize Node</PrimaryButton>
+        </template>
+    </FormSection>
+</template>
diff --git a/resources/js/Pages/Nodes/Partials/ServerDetailsForm.vue b/resources/js/Pages/Nodes/Partials/ServerDetailsForm.vue
new file mode 100644
index 0000000..8500f2c
--- /dev/null
+++ b/resources/js/Pages/Nodes/Partials/ServerDetailsForm.vue
@@ -0,0 +1,42 @@
+
+<script setup>
+import InputLabel from "@/Components/InputLabel.vue";
+import PrimaryButton from "@/Components/PrimaryButton.vue";
+import InputError from "@/Components/InputError.vue";
+import FormSection from "@/Components/FormSection.vue";
+import TextInput from "@/Components/TextInput.vue";
+import {useForm} from "@inertiajs/vue3";
+
+const props = defineProps({
+    node: Object
+});
+
+const form = useForm({
+    name: props.node.name,
+})
+</script>
+
+<template>
+    <FormSection>
+        <template #title>
+            Server Details
+        </template>
+
+        <template #form>
+            <div class="col-span-6 sm:col-span-4" v-auto-animate>
+                <InputLabel for="server_name" value="Server Name" />
+                <TextInput id="server_name"
+                           v-model="form.name"
+                           class="block w-full mt-1"
+                />
+                <InputError :message="form.errors.name" class="mt-2" />
+            </div>
+        </template>
+
+        <template #actions>
+            <PrimaryButton :disabled="form.processing">
+                Save
+            </PrimaryButton>
+        </template>
+    </FormSection>
+</template>
diff --git a/resources/js/Pages/Nodes/Show.vue b/resources/js/Pages/Nodes/Show.vue
new file mode 100644
index 0000000..af895e5
--- /dev/null
+++ b/resources/js/Pages/Nodes/Show.vue
@@ -0,0 +1,35 @@
+<script setup>
+import AppLayout from '@/Layouts/AppLayout.vue';
+import PrimaryButton from "@/Components/PrimaryButton.vue";
+import FormSection from "@/Components/FormSection.vue";
+import NewSwarmCluster from "@/Pages/Nodes/Partials/NewSwarmCluster.vue";
+import ServerDetailsForm from "@/Pages/Nodes/Partials/ServerDetailsForm.vue";
+import LayoutTab from "@/Components/LayoutTab.vue";
+import ShowLayout from "@/Pages/Nodes/ShowLayout.vue";
+import { CopyClipboard } from 'flowbite';
+import {onMounted, ref} from "vue";
+import AgentInstall from "@/Pages/Nodes/Partials/AgentInstall.vue";
+import AgentStatus from "@/Pages/Nodes/Partials/AgentStatus.vue";
+import SectionBorder from "@/Components/SectionBorder.vue";
+
+defineProps([
+    'node'
+])
+
+
+
+</script>
+
+<template>
+    <ShowLayout :node="$props.node">
+        <ServerDetailsForm :node="$props.node"/>
+
+      <SectionBorder />
+
+        <AgentStatus :node="$props.node"/>
+
+      <SectionBorder v-if="$props.node.online" />
+
+        <NewSwarmCluster v-if="$props.node.online"/>
+    </ShowLayout>
+</template>
diff --git a/resources/js/Pages/Nodes/ShowLayout.vue b/resources/js/Pages/Nodes/ShowLayout.vue
new file mode 100644
index 0000000..eeb320a
--- /dev/null
+++ b/resources/js/Pages/Nodes/ShowLayout.vue
@@ -0,0 +1,51 @@
+<script setup>
+import AppLayout from "@/Layouts/AppLayout.vue";
+import LayoutTab from "@/Components/LayoutTab.vue";
+
+const props = defineProps({
+    node: Object
+})
+</script>
+
+<template>
+    <AppLayout title="Dashboard">
+        <template #header>
+            <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+                {{ $props.node.name }}
+
+
+              <span v-if="$props.node.online"
+                    class="bg-green-100 text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300">Green</span>
+              <span v-else
+                    class="bg-red-300 text-red-950 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-red-900 dark:text-red-300">Offline</span>
+
+            </h2>
+        </template>
+
+        <template #actions>
+            <!--            <PrimaryButton type="button" @click="router.get(route('nodes.create'))">Create</PrimaryButton>-->
+        </template>
+
+        <template #tabs>
+            <LayoutTab :href="route('nodes.show', {'id': $props.node.id})">
+                <template #icon>
+                    <svg class="w-6 h-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1M5 12h14M5 12a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1m-2 3h.01M14 15h.01M17 9h.01M14 9h.01"/>
+                    </svg>
+                </template>
+
+                <template #title>
+                    Overview
+                </template>
+            </LayoutTab>
+        </template>
+
+        <div class="py-12">
+            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+
+            <slot />
+
+            </div>
+        </div>
+    </AppLayout>
+</template>
diff --git a/resources/js/app.js b/resources/js/app.js
index b6f9fb0..0d9e5ac 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -1,9 +1,12 @@
 import './bootstrap';
 import '../css/app.css';
 
+import {initFlowbite} from 'flowbite';
+
 import { createApp, h } from 'vue';
 import { createInertiaApp } from '@inertiajs/vue3';
 import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
+import { autoAnimatePlugin } from '@formkit/auto-animate/vue'
 import { ZiggyVue } from '../../vendor/tightenco/ziggy';
 
 const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
@@ -12,9 +15,12 @@ createInertiaApp({
     title: (title) => `${title} - ${appName}`,
     resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
     setup({ el, App, props, plugin }) {
+        initFlowbite();
+
         return createApp({ render: () => h(App, props) })
             .use(plugin)
             .use(ZiggyVue)
+            .use(autoAnimatePlugin)
             .mount(el);
     },
     progress: {
diff --git a/routes/api.php b/routes/api.php
index ccc387f..220c590 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -1,8 +1,13 @@
 <?php
 
+use App\Http\Middleware\NodeAuth;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Route;
 
+Route::group(['middleware' => NodeAuth::class, 'prefix' => '/api:node/v1'], function () {
+
+});
+
 Route::get('/user', function (Request $request) {
     return $request->user();
-})->middleware('auth:sanctum');
+})->middleware('auth:sanctum');
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index 5bfb842..771f071 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -21,4 +21,6 @@
     Route::get('/dashboard', function () {
         return Inertia::render('Dashboard');
     })->name('dashboard');
+
+    Route::resource("nodes", \App\Http\Controllers\NodeController::class);
 });
diff --git a/tailwind.config.js b/tailwind.config.js
index e7fb848..6f270bd 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,6 +10,7 @@ export default {
         './storage/framework/views/*.php',
         './resources/views/**/*.blade.php',
         './resources/js/**/*.vue',
+        './node_modules/flowbite/**/*.js'
     ],
 
     theme: {
@@ -20,5 +21,5 @@ export default {
         },
     },
 
-    plugins: [forms, typography],
+    plugins: [forms, typography, require('flowbite/plugin')],
 };