diff --git a/apps/edr-freight-web/portal/src/App.tsx b/apps/edr-freight-web/portal/src/App.tsx
index 591f2ec38..65b928830 100644
--- a/apps/edr-freight-web/portal/src/App.tsx
+++ b/apps/edr-freight-web/portal/src/App.tsx
@@ -42,6 +42,8 @@ import DocumentsPage from "./pages/documents/DocumentsPage";
 import DropdownSettingsPage from "./pages/admin/DropdownSettingsPage";
 import FileUploadSettingsPage from "./pages/admin/FileUploadSettingsPage";
 import MyPortalPage from "./pages/portal/MyPortalPage";
+import EDRFreightLandingPage from "./pages/EDRFreightLandingPage";
+import SignupPage from "./pages/accounts/SignupPage";
 
 const sidebarItems: SidebarItem[] = [
   { label: "My Portal", href: "/portal", icon: <UserCircle /> },
@@ -74,8 +76,10 @@ const App = () => {
   if (!user) {
     return (
       <Routes>
+        <Route path="/" element={<EDRFreightLandingPage />} />
+        <Route path="/signup" element={<SignupPage />} />
         <Route path="/auth" element={<IamLoginPage />} />
-        <Route path="*" element={<Navigate to="/auth" replace />} />
+        {/* <Route path="*" element={<Navigate to="/auth" replace />} /> */}
       </Routes>
     );
   }
diff --git a/apps/edr-freight-web/portal/src/pages/EDRFreightLandingPage.tsx b/apps/edr-freight-web/portal/src/pages/EDRFreightLandingPage.tsx
new file mode 100644
index 000000000..d0faeb662
--- /dev/null
+++ b/apps/edr-freight-web/portal/src/pages/EDRFreightLandingPage.tsx
@@ -0,0 +1,612 @@
+import {
+  ArrowRight,
+  BarChart3,
+  CheckCircle2,
+  Clock3,
+  Globe2,
+  Mail,
+  MapPin,
+  Menu,
+  Phone,
+  ShieldCheck,
+  Train,
+  Truck,
+  Users,
+} from "lucide-react";
+
+const stats = [
+  {
+    label: "Active Corridors",
+    value: "24+",
+    icon: Globe2,
+  },
+  {
+    label: "Monthly Shipments",
+    value: "12K+",
+    icon: Truck,
+  },
+  {
+    label: "Fleet Coverage",
+    value: "16 Trains",
+    icon: Train,
+  },
+  {
+    label: "On-time Delivery",
+    value: "100%",
+    icon: Clock3,
+  },
+];
+
+const features = [
+  {
+    title: "Real-time Shipment Tracking",
+    description:
+      "Track consignments across Addis Ababa, Dire Dawa, Djibouti, Mojo, and all major freight corridors.",
+    icon: Truck,
+  },
+  {
+    title: "Rail Freight Operations",
+    description:
+      "Monitor train schedules, operational performance, maintenance, and corridor activity.",
+    icon: Train,
+  },
+  {
+    title: "Smart Analytics Dashboard",
+    description:
+      "Visualize operational insights, shipment trends, and corridor performance in real time.",
+    icon: BarChart3,
+  },
+  {
+    title: "Enterprise-grade Security",
+    description:
+      "Secure portal access, billing workflows, document management, and customer operations.",
+    icon: ShieldCheck,
+  },
+];
+
+const corridors = [
+  "Addis Ababa → Djibouti",
+  "Dire Dawa → Djibouti",
+  "Adama → Dire Dawa",
+  "Mojo → Djibouti",
+  "Awash → Holhol",
+  "Mieso → Aysha",
+];
+
+export default function EDRFreightLandingPage() {
+  return (
+    <div className="min-h-screen bg-background text-foreground">
+      {/* Navbar */}
+      <header className="sticky top-0 z-50 border-b border-border bg-background/80 backdrop-blur-xl">
+        <div className="mx-auto flex h-20 max-w-7xl items-center justify-between px-6">
+          <div className="flex items-center gap-3">
+            <div className="flex size-12 items-center justify-center rounded-2xl bg-primary text-primary-foreground shadow-lg">
+              <Train className="size-6" />
+            </div>
+
+            <div>
+              <h1 className="text-xl font-bold tracking-tight">
+                EDR Freight
+              </h1>
+
+              <p className="text-sm text-muted-foreground">
+                Rail Logistics Platform
+              </p>
+            </div>
+          </div>
+
+          <nav className="hidden items-center gap-8 md:flex">
+            <a
+              href="#features"
+              className="text-sm font-medium text-muted-foreground transition hover:text-foreground"
+            >
+              Features
+            </a>
+
+            <a
+              href="#corridors"
+              className="text-sm font-medium text-muted-foreground transition hover:text-foreground"
+            >
+              Corridors
+            </a>
+
+            <a
+              href="#contact"
+              className="text-sm font-medium text-muted-foreground transition hover:text-foreground"
+            >
+              Contact
+            </a>
+          </nav>
+
+          <div className="flex items-center gap-3">
+            <a
+              href="http://localhost:5173/auth"
+              className="hidden rounded-2xl border border-border bg-card px-5 py-2.5 text-sm font-medium transition hover:bg-accent md:block"
+            >
+              Login
+            </a>
+
+            <a
+              href="http://localhost:5173/signup"
+              className="hidden items-center gap-2 rounded-2xl bg-primary px-5 py-2.5 text-sm font-semibold text-primary-foreground shadow-lg transition hover:opacity-90 md:flex"
+            >
+              Get Started
+              <ArrowRight className="size-4" />
+            </a>
+
+            <button className="rounded-2xl border border-border p-2 md:hidden">
+              <Menu className="size-5" />
+            </button>
+          </div>
+        </div>
+      </header>
+
+      {/* Hero */}
+      <section className="relative overflow-hidden">
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(16,185,129,0.16),transparent_35%)]" />
+
+        <div className="mx-auto grid max-w-7xl gap-16 px-6 py-20 lg:grid-cols-2 lg:items-center">
+          <div>
+            <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-border bg-accent px-4 py-2 text-sm font-medium text-primary shadow-sm">
+              <span className="size-2 rounded-full bg-primary" />
+              Ethiopia–Djibouti Railway Freight Platform
+            </div>
+
+            <h1 className="max-w-2xl text-5xl font-black leading-tight tracking-tight md:text-6xl">
+              Smarter Railway Freight Logistics For Modern Operations
+            </h1>
+
+            <p className="mt-6 max-w-2xl text-lg leading-8 text-muted-foreground">
+              EDR Freight enables logistics companies and railway operators
+              to manage shipments, monitor freight corridors, optimize train
+              operations, and streamline enterprise logistics workflows.
+            </p>
+
+            <div className="mt-10 flex flex-wrap gap-4">
+              <a
+                href="http://localhost:5173/signup"
+                className="flex items-center gap-2 rounded-2xl bg-primary px-6 py-3 font-semibold text-primary-foreground shadow-lg transition hover:-translate-y-0.5 hover:opacity-90"
+              >
+                Get Started
+                <ArrowRight className="size-5" />
+              </a>
+
+              <a
+                href="http://localhost:5173/auth"
+                className="rounded-2xl border border-border bg-card px-6 py-3 font-semibold transition hover:bg-accent"
+              >
+                Login
+              </a>
+            </div>
+
+            <div className="mt-12 flex flex-wrap gap-6">
+              {[
+                "Real-time Tracking",
+                "Railway Analytics",
+                "Secure Operations",
+                "Multi-corridor Freight",
+              ].map((item) => (
+                <div
+                  key={item}
+                  className="flex items-center gap-2 text-sm text-muted-foreground"
+                >
+                  <CheckCircle2 className="size-4 text-primary" />
+                  {item}
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Hero Dashboard Card */}
+          <div className="relative">
+            <div className="rounded-[32px] border border-border bg-card p-8 shadow-2xl">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm text-muted-foreground">
+                    Freight Operations
+                  </p>
+
+                  <h3 className="mt-2 text-3xl font-bold">
+                    Live Statistics
+                  </h3>
+                </div>
+
+                <div className="rounded-2xl bg-primary/10 p-4 text-primary">
+                  <BarChart3 className="size-7" />
+                </div>
+              </div>
+
+              <div className="mt-8 grid grid-cols-2 gap-4">
+                {stats.map((item) => {
+                  const Icon = item.icon;
+
+                  return (
+                    <div
+                      key={item.label}
+                      className="rounded-3xl border border-border bg-background p-5 transition hover:-translate-y-1 hover:shadow-lg"
+                    >
+                      <div className="mb-4 flex size-12 items-center justify-center rounded-2xl bg-accent text-primary">
+                        <Icon className="size-6" />
+                      </div>
+
+                      <h4 className="text-3xl font-black">
+                        {item.value}
+                      </h4>
+
+                      <p className="mt-1 text-sm text-muted-foreground">
+                        {item.label}
+                      </p>
+                    </div>
+                  );
+                })}
+              </div>
+
+              <div className="mt-8 rounded-3xl border border-border bg-accent p-6">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <p className="text-sm text-muted-foreground">
+                      Corridor Performance
+                    </p>
+
+                    <h3 className="mt-2 text-4xl font-black text-primary">
+                      99%
+                    </h3>
+                  </div>
+
+                  <div className="rounded-2xl bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground">
+                    Operational
+                  </div>
+                </div>
+
+                <div className="mt-6 h-3 overflow-hidden rounded-full bg-primary/10">
+                  <div className="h-full w-[99%] rounded-full bg-primary" />
+                </div>
+              </div>
+            </div>
+
+            <div className="absolute -bottom-6 -left-6 hidden rounded-3xl border border-border bg-card p-5 shadow-xl lg:block">
+              <div className="flex items-center gap-4">
+                <div className="flex size-14 items-center justify-center rounded-2xl bg-primary/10 text-primary">
+                  <Train className="size-7" />
+                </div>
+
+                <div>
+                  <h4 className="text-lg font-bold">
+                    16 Trains Active
+                  </h4>
+
+                  <p className="text-sm text-muted-foreground">
+                    Across all freight corridors
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Features */}
+      <section
+        id="features"
+        className="border-t border-border bg-card/40 py-24"
+      >
+        <div className="mx-auto max-w-7xl px-6">
+          <div className="max-w-3xl">
+            <div className="inline-flex rounded-full bg-accent px-4 py-2 text-sm font-semibold text-primary">
+              Platform Features
+            </div>
+
+            <h2 className="mt-6 text-4xl font-black tracking-tight">
+              Everything needed for freight operations
+            </h2>
+
+            <p className="mt-4 text-lg leading-8 text-muted-foreground">
+              Centralized railway freight operations with live shipment
+              visibility, operational monitoring, customer management,
+              and intelligent logistics insights.
+            </p>
+          </div>
+
+          <div className="mt-16 grid gap-6 md:grid-cols-2 xl:grid-cols-4">
+            {features.map((feature) => {
+              const Icon = feature.icon;
+
+              return (
+                <div
+                  key={feature.title}
+                  className="group rounded-[28px] border border-border bg-background p-7 shadow-sm transition duration-300 hover:-translate-y-2 hover:shadow-2xl"
+                >
+                  <div className="flex size-14 items-center justify-center rounded-2xl bg-accent text-primary transition group-hover:scale-110">
+                    <Icon className="size-7" />
+                  </div>
+
+                  <h3 className="mt-6 text-xl font-bold">
+                    {feature.title}
+                  </h3>
+
+                  <p className="mt-3 leading-7 text-muted-foreground">
+                    {feature.description}
+                  </p>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </section>
+
+      {/* Corridors */}
+      <section id="corridors" className="py-24">
+        <div className="mx-auto max-w-7xl px-6">
+          <div className="grid gap-16 lg:grid-cols-2 lg:items-center">
+            <div>
+              <div className="inline-flex rounded-full bg-accent px-4 py-2 text-sm font-semibold text-primary">
+                Freight Corridors
+              </div>
+
+              <h2 className="mt-6 text-4xl font-black tracking-tight">
+                Connected logistics infrastructure
+              </h2>
+
+              <p className="mt-5 text-lg leading-8 text-muted-foreground">
+                Efficiently move freight across strategic Ethiopia–Djibouti
+                railway corridors with operational visibility and optimized
+                transport coordination.
+              </p>
+
+              <div className="mt-10 grid gap-4 sm:grid-cols-2">
+                {corridors.map((corridor) => (
+                  <div
+                    key={corridor}
+                    className="flex items-center gap-3 rounded-2xl border border-border bg-card p-4 transition hover:border-primary/30 hover:bg-accent"
+                  >
+                    <div className="size-3 rounded-full bg-primary" />
+
+                    <span className="font-medium">{corridor}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div className="rounded-[32px] border border-border bg-card p-8 shadow-xl">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm text-muted-foreground">
+                    Operational Insights
+                  </p>
+
+                  <h3 className="mt-2 text-3xl font-bold">
+                    Freight Performance
+                  </h3>
+                </div>
+
+                <div className="rounded-2xl bg-primary/10 p-4 text-primary">
+                  <Users className="size-7" />
+                </div>
+              </div>
+
+              <div className="mt-10 space-y-6">
+                {[
+                  {
+                    label: "Bookings Processed",
+                    value: "9,842",
+                    progress: "92%",
+                  },
+                  {
+                    label: "On-time Shipments",
+                    value: "99%",
+                    progress: "99%",
+                  },
+                  {
+                    label: "Customer Satisfaction",
+                    value: "99%",
+                    progress: "99%",
+                  },
+                ].map((item) => (
+                  <div key={item.label}>
+                    <div className="mb-2 flex items-center justify-between">
+                      <span className="font-medium">{item.label}</span>
+
+                      <span className="text-muted-foreground">
+                        {item.value}
+                      </span>
+                    </div>
+
+                    <div className="h-3 overflow-hidden rounded-full bg-secondary">
+                      <div
+                        className="h-full rounded-full bg-primary transition-all duration-700"
+                        style={{ width: item.progress }}
+                      />
+                    </div>
+                  </div>
+                ))}
+              </div>
+
+              <div className="mt-10 rounded-3xl bg-accent p-6">
+                <div className="flex items-center gap-4">
+                  <div className="flex size-14 items-center justify-center rounded-2xl bg-primary text-primary-foreground">
+                    <CheckCircle2 className="size-7" />
+                  </div>
+
+                  <div>
+                    <h4 className="text-lg font-bold">
+                      Enterprise-ready Platform
+                    </h4>
+
+                    <p className="text-sm text-muted-foreground">
+                      Designed for large-scale freight and railway operations.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Contact */}
+      <section
+        id="contact"
+        className="border-t border-border bg-card/40 py-24"
+      >
+        <div className="mx-auto max-w-7xl px-6">
+          <div className="grid gap-12 lg:grid-cols-2">
+            <div>
+              <div className="inline-flex rounded-full bg-accent px-4 py-2 text-sm font-semibold text-primary">
+                Contact Us
+              </div>
+
+              <h2 className="mt-6 text-4xl font-black tracking-tight">
+                Let’s move freight smarter
+              </h2>
+
+              <p className="mt-5 text-lg leading-8 text-muted-foreground">
+                Contact EDR Freight for partnership opportunities,
+                enterprise onboarding, or logistics support.
+              </p>
+
+              <div className="mt-10 space-y-5">
+                <div className="flex items-center gap-4 rounded-2xl border border-border bg-background p-5">
+                  <div className="rounded-2xl bg-accent p-3 text-primary">
+                    <Mail className="size-5" />
+                  </div>
+
+                  <div>
+                    <p className="font-semibold">Email</p>
+                    <p className="text-muted-foreground">
+                      support@edrfreight.com
+                    </p>
+                  </div>
+                </div>
+
+                <div className="flex items-center gap-4 rounded-2xl border border-border bg-background p-5">
+                  <div className="rounded-2xl bg-accent p-3 text-primary">
+                    <Phone className="size-5" />
+                  </div>
+
+                  <div>
+                    <p className="font-semibold">Phone</p>
+                    <p className="text-muted-foreground">
+                      +251 11 000 0000
+                    </p>
+                  </div>
+                </div>
+
+                <div className="flex items-center gap-4 rounded-2xl border border-border bg-background p-5">
+                  <div className="rounded-2xl bg-accent p-3 text-primary">
+                    <MapPin className="size-5" />
+                  </div>
+
+                  <div>
+                    <p className="font-semibold">Head Office</p>
+                    <p className="text-muted-foreground">
+                      Addis Ababa, Ethiopia
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Contact Form */}
+            <div className="rounded-[32px] border border-border bg-card p-8 shadow-xl">
+              <h3 className="text-2xl font-bold">
+                Send us a message
+              </h3>
+
+              <p className="mt-2 text-muted-foreground">
+                We’ll get back to you as soon as possible.
+              </p>
+
+              <div className="mt-8 space-y-5">
+                <input
+                  type="text"
+                  placeholder="Full Name"
+                  className="h-12 w-full rounded-2xl border border-input bg-background px-4 outline-none transition focus:border-primary focus:ring-4 focus:ring-primary/10"
+                />
+
+                <input
+                  type="email"
+                  placeholder="Email Address"
+                  className="h-12 w-full rounded-2xl border border-input bg-background px-4 outline-none transition focus:border-primary focus:ring-4 focus:ring-primary/10"
+                />
+
+                <textarea
+                  rows={5}
+                  placeholder="Write your message..."
+                  className="w-full rounded-2xl border border-input bg-background px-4 py-3 outline-none transition focus:border-primary focus:ring-4 focus:ring-primary/10"
+                />
+
+                <button className="flex w-full items-center justify-center gap-2 rounded-2xl bg-primary px-6 py-3 font-semibold text-primary-foreground shadow-lg transition hover:opacity-90">
+                  Send Message
+                  <ArrowRight className="size-5" />
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section className="border-t border-border py-24">
+        <div className="mx-auto max-w-5xl px-6">
+          <div className="rounded-[40px] bg-primary px-8 py-16 text-center text-primary-foreground shadow-2xl md:px-16">
+            <div className="mx-auto max-w-3xl">
+              <div className="inline-flex rounded-full bg-white/10 px-4 py-2 text-sm font-semibold">
+                EDR Freight Platform
+              </div>
+
+              <h2 className="mt-6 text-5xl font-black tracking-tight">
+                Transform railway freight operations
+              </h2>
+
+              <p className="mt-6 text-lg leading-8 opacity-85">
+                Centralize logistics workflows, optimize freight movement,
+                and gain real-time operational visibility across all
+                railway corridors.
+              </p>
+
+              <div className="mt-10 flex flex-wrap items-center justify-center gap-4">
+                <a
+                  href="http://localhost:5173/signup"
+                  className="flex items-center gap-2 rounded-2xl bg-white px-7 py-3 font-semibold text-primary shadow-lg transition hover:opacity-90"
+                >
+                  Create Account
+                  <ArrowRight className="size-5" />
+                </a>
+
+                <a
+                  href="http://localhost:5173/auth"
+                  className="rounded-2xl border border-white/20 bg-white/10 px-7 py-3 font-semibold backdrop-blur transition hover:bg-white/20"
+                >
+                  Sign In
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="border-t border-border py-8">
+        <div className="mx-auto flex max-w-7xl flex-col items-center justify-between gap-4 px-6 text-sm text-muted-foreground md:flex-row">
+          <div className="flex items-center gap-3">
+            <div className="flex size-10 items-center justify-center rounded-2xl bg-primary text-primary-foreground">
+              <Train className="size-5" />
+            </div>
+
+            <div>
+              <p className="font-semibold text-foreground">
+                EDR Freight
+              </p>
+
+              <p>Modern railway logistics management platform</p>
+            </div>
+          </div>
+
+          <div>
+            © 2026 EDR Freight. All rights reserved.
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/edr-freight-web/portal/src/pages/accounts/SignupPage.tsx b/apps/edr-freight-web/portal/src/pages/accounts/SignupPage.tsx
new file mode 100644
index 000000000..6afa5b421
--- /dev/null
+++ b/apps/edr-freight-web/portal/src/pages/accounts/SignupPage.tsx
@@ -0,0 +1,350 @@
+import { ArrowRight, ShieldCheck, Train, UserPlus } from "lucide-react";
+import { useState } from "react";
+
+const userTypes = [
+  "Customer",
+  "Operator",
+  "Dispatcher",
+  "Admin",
+];
+
+export default function SignupPage() {
+  const [form, setForm] = useState({
+    email: "",
+    username: "",
+    phoneNumber: "",
+    userType: "",
+    name: {
+      am: "",
+      en: "",
+    },
+  });
+
+  const handleChange = (
+    field: string,
+    value: string,
+    nested?: boolean
+  ) => {
+    if (nested) {
+      setForm((prev) => ({
+        ...prev,
+        name: {
+          ...prev.name,
+          [field]: value,
+        },
+      }));
+
+      return;
+    }
+
+    setForm((prev) => ({
+      ...prev,
+      [field]: value,
+    }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    console.log(form);
+
+    /*
+    Expected payload:
+    {
+      email: "",
+      username: "",
+      phoneNumber: "",
+      userType: "",
+      name: {
+        am: "",
+        en: ""
+      }
+    }
+    */
+  };
+
+  return (
+    <div className="min-h-screen bg-background text-foreground">
+      <div className="grid min-h-screen lg:grid-cols-2">
+        {/* Left Side */}
+        <div className="relative hidden overflow-hidden bg-primary p-12 text-primary-foreground lg:flex lg:flex-col lg:justify-between">
+          <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(255,255,255,0.14),transparent_35%)]" />
+
+          <div className="relative z-10">
+            <div className="flex items-center gap-3">
+              <div className="flex size-14 items-center justify-center rounded-3xl bg-white/10 backdrop-blur">
+                <Train className="size-7" />
+              </div>
+
+              <div>
+                <h1 className="text-3xl font-black tracking-tight">
+                  EDR Freight
+                </h1>
+
+                <p className="mt-1 text-sm opacity-80">
+                  Railway Logistics Platform
+                </p>
+              </div>
+            </div>
+
+            <div className="mt-20 max-w-lg">
+              <div className="inline-flex rounded-full bg-white/10 px-4 py-2 text-sm font-semibold backdrop-blur">
+                Smart Freight Operations
+              </div>
+
+              <h2 className="mt-6 text-5xl font-black leading-tight tracking-tight">
+                Create your freight operations account
+              </h2>
+
+              <p className="mt-6 text-lg leading-8 opacity-85">
+                Join EDR Freight to manage shipments, monitor railway
+                operations, track consignments, and streamline logistics
+                workflows across Ethiopia and Djibouti.
+              </p>
+            </div>
+
+            <div className="mt-14 grid gap-5">
+              {[
+                "Real-time shipment tracking",
+                "Secure logistics management",
+                "Enterprise-grade operations",
+                "Multi-corridor freight monitoring",
+              ].map((item) => (
+                <div
+                  key={item}
+                  className="flex items-center gap-3"
+                >
+                  <div className="flex size-10 items-center justify-center rounded-2xl bg-white/10">
+                    <ShieldCheck className="size-5" />
+                  </div>
+
+                  <span className="font-medium">{item}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className="relative z-10 rounded-[32px] border border-white/10 bg-white/10 p-6 backdrop-blur-xl">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm opacity-80">
+                  Active Corridors
+                </p>
+
+                <h3 className="mt-2 text-4xl font-black">
+                  24+
+                </h3>
+              </div>
+
+              <div className="rounded-2xl bg-white/10 px-4 py-2 text-sm font-semibold">
+                Operational
+              </div>
+            </div>
+
+            <div className="mt-6 h-3 overflow-hidden rounded-full bg-white/10">
+              <div className="h-full w-[95%] rounded-full bg-white" />
+            </div>
+          </div>
+        </div>
+
+        {/* Right Side */}
+        <div className="flex items-center justify-center p-6 md:p-10">
+          <div className="w-full max-w-2xl">
+            {/* Mobile Logo */}
+            <div className="mb-8 flex items-center gap-3 lg:hidden">
+              <div className="flex size-12 items-center justify-center rounded-2xl bg-primary text-primary-foreground">
+                <Train className="size-6" />
+              </div>
+
+              <div>
+                <h1 className="text-2xl font-bold">
+                  EDR Freight
+                </h1>
+
+                <p className="text-sm text-muted-foreground">
+                  Railway Logistics Platform
+                </p>
+              </div>
+            </div>
+
+            <div className="rounded-[36px] border border-border bg-card p-8 shadow-2xl md:p-10">
+              <div className="mb-8">
+                <div className="mb-4 flex size-16 items-center justify-center rounded-3xl bg-primary/10 text-primary">
+                  <UserPlus className="size-8" />
+                </div>
+
+                <h2 className="text-4xl font-black tracking-tight">
+                  Create Account
+                </h2>
+
+                <p className="mt-3 text-lg text-muted-foreground">
+                  Register to access EDR Freight services and
+                  railway logistics operations.
+                </p>
+              </div>
+
+              <form
+                onSubmit={handleSubmit}
+                className="space-y-6"
+              >
+                {/* Names */}
+                <div className="grid gap-5 md:grid-cols-2">
+                  <div>
+                    <label className="mb-2 block text-sm font-semibold">
+                      Full Name (English)
+                    </label>
+
+                    <input
+                      type="text"
+                      value={form.name.en}
+                      onChange={(e) =>
+                        handleChange(
+                          "en",
+                          e.target.value,
+                          true
+                        )
+                      }
+                      placeholder="John Doe"
+                      className="h-13 w-full rounded-2xl border border-input bg-background px-4 outline-none transition focus:border-primary focus:ring-4 focus:ring-primary/10"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="mb-2 block text-sm font-semibold">
+                      Full Name (Amharic)
+                    </label>
+
+                    <input
+                      type="text"
+                      value={form.name.am}
+                      onChange={(e) =>
+                        handleChange(
+                          "am",
+                          e.target.value,
+                          true
+                        )
+                      }
+                      placeholder="ጆን ዶ"
+                      className="h-13 w-full rounded-2xl border border-input bg-background px-4 outline-none transition focus:border-primary focus:ring-4 focus:ring-primary/10"
+                    />
+                  </div>
+                </div>
+
+                {/* Username */}
+                <div>
+                  <label className="mb-2 block text-sm font-semibold">
+                    Username
+                  </label>
+
+                  <input
+                    type="text"
+                    value={form.username}
+                    onChange={(e) =>
+                      handleChange(
+                        "username",
+                        e.target.value
+                      )
+                    }
+                    placeholder="john_doe"
+                    className="h-13 w-full rounded-2xl border border-input bg-background px-4 outline-none transition focus:border-primary focus:ring-4 focus:ring-primary/10"
+                  />
+                </div>
+
+                {/* Email + Phone */}
+                <div className="grid gap-5 md:grid-cols-2">
+                  <div>
+                    <label className="mb-2 block text-sm font-semibold">
+                      Email Address
+                    </label>
+
+                    <input
+                      type="email"
+                      value={form.email}
+                      onChange={(e) =>
+                        handleChange(
+                          "email",
+                          e.target.value
+                        )
+                      }
+                      placeholder="john@example.com"
+                      className="h-13 w-full rounded-2xl border border-input bg-background px-4 outline-none transition focus:border-primary focus:ring-4 focus:ring-primary/10"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="mb-2 block text-sm font-semibold">
+                      Phone Number
+                    </label>
+
+                    <input
+                      type="tel"
+                      value={form.phoneNumber}
+                      onChange={(e) =>
+                        handleChange(
+                          "phoneNumber",
+                          e.target.value
+                        )
+                      }
+                      placeholder="+251 9xx xxx xxx"
+                      className="h-13 w-full rounded-2xl border border-input bg-background px-4 outline-none transition focus:border-primary focus:ring-4 focus:ring-primary/10"
+                    />
+                  </div>
+                </div>
+
+                {/* User Type */}
+                <div>
+                  <label className="mb-2 block text-sm font-semibold">
+                    User Type
+                  </label>
+
+                  <select
+                    value={form.userType}
+                    onChange={(e) =>
+                      handleChange(
+                        "userType",
+                        e.target.value
+                      )
+                    }
+                    className="h-13 w-full rounded-2xl border border-input bg-background px-4 outline-none transition focus:border-primary focus:ring-4 focus:ring-primary/10"
+                  >
+                    <option value="">
+                      Select user type
+                    </option>
+
+                    {userTypes.map((type) => (
+                      <option
+                        key={type}
+                        value={type}
+                      >
+                        {type}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+
+                {/* Submit */}
+                <button
+                  type="submit"
+                  className="flex h-14 w-full items-center justify-center gap-2 rounded-2xl bg-primary text-lg font-semibold text-primary-foreground shadow-lg transition hover:-translate-y-0.5 hover:opacity-90"
+                >
+                  Create Account
+                  <ArrowRight className="size-5" />
+                </button>
+
+                <p className="text-center text-sm text-muted-foreground">
+                  Already have an account?
+                  <button
+                    type="button"
+                    className="ml-2 font-semibold text-primary hover:underline"
+                  >
+                    Sign In
+                  </button>
+                </p>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/edr-freight-web/portal/src/services/crud.ts b/apps/edr-freight-web/portal/src/services/crud.ts
deleted file mode 100644
index 4ebb8d8a1..000000000
--- a/apps/edr-freight-web/portal/src/services/crud.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { client } from "@/utils/api";
-import { AxiosRequestConfig, AxiosResponse } from "axios";
-
-
-class ApiService {
-  async get<T = any>(
-    url: string,
-    config?: AxiosRequestConfig
-  ): Promise<T> {
-    const response: AxiosResponse<T> =
-      await client.get(url, config);
-
-    return response.data;
-  }
-
-  async post<T = any>(
-    url: string,
-    data?: any,
-    config?: AxiosRequestConfig
-  ): Promise<T> {
-    const response: AxiosResponse<T> =
-      await client.post(url, data, config);
-
-    return response.data;
-  }
-
-  async put<T = any>(
-    url: string,
-    data?: any,
-    config?: AxiosRequestConfig
-  ): Promise<T> {
-    const response: AxiosResponse<T> =
-      await client.put(url, data, config);
-
-    return response.data;
-  }
-
-  async patch<T = any>(
-    url: string,
-    data?: any,
-    config?: AxiosRequestConfig
-  ): Promise<T> {
-    const response: AxiosResponse<T> =
-      await client.patch(url, data, config);
-
-    return response.data;
-  }
-
-  async delete<T = any>(
-    url: string,
-    config?: AxiosRequestConfig
-  ): Promise<T> {
-    const response: AxiosResponse<T> =
-      await client.delete(url, config);
-
-    return response.data;
-  }
-}
-
-export const api = new ApiService();
\ No newline at end of file