diff --git a/src/app.js b/src/app.js
index bca07f2..41c3788 100644
--- a/src/app.js
+++ b/src/app.js
@@ -5,8 +5,12 @@ dotenv.config();
 
 require("./bot/bot");
 
+// import middleware
+const attachGuilds = require("./server/middleware/attachGuilds");
+
 // import routers
 const homeRouter = require("./server/routes/home");
+const guildRouter = require("./server/routes/guild");
 
 
 const app = express();
@@ -18,8 +22,12 @@ app.set("view engine", "ejs");
 app.use("/static", express.static(__dirname + "/client/public"));
 app.use("/static/preline.js", express.static(__dirname + "/../node_modules/preline/dist/preline.js"));
 
+// register middleware
+app.use(attachGuilds);
+
 // register routers
 app.use("/", homeRouter);
+app.use("/guild", guildRouter);
 
 const PORT = process.env.PORT || 3000;
 
diff --git a/src/client/views/guild.ejs b/src/client/views/guild.ejs
new file mode 100644
index 0000000..0096b30
--- /dev/null
+++ b/src/client/views/guild.ejs
@@ -0,0 +1,7 @@
+<%  layout("layout") -%>
+
+<pre>
+    <code>
+        <%= JSON.stringify(guild, null, 4) %>
+    </code>
+</pre>
diff --git a/src/client/views/layout.ejs b/src/client/views/layout.ejs
index 49c5b69..423069b 100644
--- a/src/client/views/layout.ejs
+++ b/src/client/views/layout.ejs
@@ -6,12 +6,12 @@
         <title><%= title %></title>
         <link rel="stylesheet" href="/static/css/tailwind.css">
     </head>
-    <body class="bg-neutral-100 dark:bg-neutral-900 text-gray-600 dark:text-gray-400">
+    <body class="bg-neutral-100 dark:bg-neutral-900 text-gray-600 dark:text-gray-400 dark">
 
         <!-- Mobile Sidebar Controls -->
         <header class="sticky top-0 inset-x-0 z-20 lg:hidden">
             <nav class="flex p-4 sm:px-6 border-b bg-white dark:bg-neutral-800 dark:border-neutral-700">
-                <a href="#" class="text-xl font-semibold">Relay</a>
+                <a href="/" class="text-xl font-semibold">Relay</a>
                 <button type="button" class="ml-auto" data-hs-overlay="#layoutSidebarMain">
                     <svg class="shrink-0 size-6" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
                 </button>
@@ -24,7 +24,7 @@
             <div class="relative flex flex-col h-full max-h-full">
                 <!-- Sidebar Header -->
                 <div class="px-6 pt-4 flex justify-between items-center">
-                    <a href="#" class="flex-none rounded-xl text-xl inline-block font-semibold focus:outline-none focus:opacity-80">
+                    <a href="/" class="flex-none rounded-xl text-xl inline-block font-semibold focus:outline-none focus:opacity-80">
                         Relay
                     </a>
                     <button type="button" class="lg:hidden" data-hs-overlay="#layoutSidebarMain">
@@ -37,7 +37,7 @@
                     <nav class="px-4 py-6 w-full h-full flex flex-col flex-wrap">
                         <ul class="flex flex-col space-y-1">
                             <li>
-                                <a href="#" class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm rounded-lg focus:outline-none text-gray-800 hover:bg-gray-100 focus:bg-gray-100 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:text-neutral-200">
+                                <a href="/" class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm rounded-lg focus:outline-none text-gray-800 hover:bg-gray-100 focus:bg-gray-100 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:text-neutral-200">
                                     <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
                                     Dashboard
                                 </a>
@@ -63,8 +63,8 @@
         <aside id="layoutSidebarGuilds" class="layout-sidebar-guilds hs-overlay hs-overlay-open:translate-x-0 [--is-layout-affect:true]" role="dialog" tabindex="-1">
             <div class="relative flex flex-col h-full max-h full">
                 <!-- Guild Sidebar Header -->
-                <div class="px-6 pt-4 mt-2 flex justify-between items-center">
-                    <span class="flex-none rounded-xl text-gray-600 dark:text-gray-400 text-xs font-semibold">
+                <div class="px-6 pt-4 mt-1 flex justify-between items-center">
+                    <span class="flex-none rounded-xl text-gray-600 dark:text-gray-400 text-sm font-semibold">
                         Discord Servers
                     </span>
                     <button type="button" data-hs-overlay="#layoutSidebarGuilds">
@@ -77,7 +77,7 @@
                     <ul class="flex flex-col space-y-1">
                         <% guilds.forEach(guild => { %>
                             <li>
-                                <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm rounded-lg focus:outline-none text-gray-800 hover:bg-gray-100 focus:bg-gray-100 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:text-neutral-200" href="#">
+                                <a href="/guild/<%= guild.id %>" class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm rounded-lg focus:outline-none text-gray-800 hover:bg-gray-100 focus:bg-gray-100 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:text-neutral-200">
                                     <% if (guild.icon) { %>
                                         <img class="size-[34px] rounded" src="<%= guild.iconURL() %>" alt="<%= guild.name %>">
                                     <% } else { %>
@@ -86,8 +86,8 @@
                                         </div>
                                     <% } %>
                                     <div>
-                                        <span class="font-semibold"><%= guild.name %></span>
-                                        <span class="font-mono text-gray-600 dark:text-gray-400"><%= guild.id %></span>
+                                        <span class="text-base font-semibold"><%= guild.name %></span>
+                                        <span class="text-sm font-mono text-gray-600 dark:text-gray-400"><%= guild.id %></span>
                                     </div>
                                 </a>
                             </li>
diff --git a/src/server/controllers/guild.js b/src/server/controllers/guild.js
new file mode 100644
index 0000000..c4d5a41
--- /dev/null
+++ b/src/server/controllers/guild.js
@@ -0,0 +1,13 @@
+const bot = require("../../bot/bot");
+
+const get = async (request, response) => {
+    const guildId = request.params.guildId;
+    const guild = bot.guilds.cache.get(guildId);
+
+    response.render("guild", {
+        title: "guild page",
+        guild: guild,
+    });
+};
+
+module.exports = { get };
diff --git a/src/server/controllers/home.js b/src/server/controllers/home.js
index ea2e08d..8b2b017 100644
--- a/src/server/controllers/home.js
+++ b/src/server/controllers/home.js
@@ -1,20 +1,8 @@
 const bot = require("../../bot/bot");
-const generateDefaultAvatar = require("../../utils/avatarGen");
 
 const get = async (request, response) => {
-    const guilds = bot.guilds.cache.map(guild => {
-
-        // // Create an avatar if no image exists
-        // if (!guild.icon) {
-        //     guild.iconURL = () => generateDefaultAvatar(guild.name, "#FFFFFF", "#171717", 50, 50);
-        // }
-
-        return guild;
-    });
-
     response.render("home", {
-        title: "home page",
-        guilds: guilds
+        title: "home page"
     });
 };
 
diff --git a/src/server/middleware/attachGuilds.js b/src/server/middleware/attachGuilds.js
new file mode 100644
index 0000000..67ddd11
--- /dev/null
+++ b/src/server/middleware/attachGuilds.js
@@ -0,0 +1,8 @@
+const bot = require("../../bot/bot");
+
+const attachGuilds = (request, response, next) => {
+    response.locals.guilds = bot.guilds.cache.map(guild => guild);
+    next();
+};
+
+module.exports = attachGuilds;
diff --git a/src/server/routes/guild.js b/src/server/routes/guild.js
new file mode 100644
index 0000000..b6fabee
--- /dev/null
+++ b/src/server/routes/guild.js
@@ -0,0 +1,8 @@
+const { Router } = require("express");
+const controller = require("../controllers/guild");
+
+const router = Router();
+
+router.get("/:guildId", controller.get);
+
+module.exports = router;
diff --git a/src/server/routes/home.js b/src/server/routes/home.js
index c3608fd..3d674e7 100644
--- a/src/server/routes/home.js
+++ b/src/server/routes/home.js
@@ -1,4 +1,3 @@
-
 const { Router } = require("express");
 const controller = require("../controllers/home");
 
