diff --git a/app/(main)/(routes)/servers/[serverId]/channels/[channelId]/page.tsx b/app/(main)/(routes)/servers/[serverId]/channels/[channelId]/page.tsx
new file mode 100644
index 0000000..4d31c31
--- /dev/null
+++ b/app/(main)/(routes)/servers/[serverId]/channels/[channelId]/page.tsx
@@ -0,0 +1,9 @@
+const ChannelIdPage = () => {
+    return (
+        <div>
+            Channel ID Page!
+        </div>
+    )
+}
+
+export default ChannelIdPage
\ No newline at end of file
diff --git a/app/(main)/(routes)/servers/[serverId]/conversations/[memberId]/page.tsx b/app/(main)/(routes)/servers/[serverId]/conversations/[memberId]/page.tsx
new file mode 100644
index 0000000..981fca2
--- /dev/null
+++ b/app/(main)/(routes)/servers/[serverId]/conversations/[memberId]/page.tsx
@@ -0,0 +1,9 @@
+const MemberIdPage = () => {
+    return (
+        <div>
+            Member ID Page
+        </div>
+    )
+}
+
+export default MemberIdPage
\ No newline at end of file
diff --git a/app/(main)/(routes)/servers/[serverId]/page.tsx b/app/(main)/(routes)/servers/[serverId]/page.tsx
index 6f2c090..fb86fcb 100644
--- a/app/(main)/(routes)/servers/[serverId]/page.tsx
+++ b/app/(main)/(routes)/servers/[serverId]/page.tsx
@@ -1,8 +1,50 @@
-const ServerIdPage = () => {
-    return (
-        <div>
-            Server ID Page
-        </div>
-    );
+import { currentProfile } from "@/lib/current-profile";
+import { db } from "@/lib/db";
+import { redirectToSignIn } from "@clerk/nextjs";
+import { redirect } from "next/navigation";
+
+interface ServerIdPageProps {
+    params: {
+        serverId: string;
+    };
+};
+
+const ServerIdPage = async ({
+    params
+}: ServerIdPageProps) => {
+    const profile = await currentProfile();
+    
+    if (!profile) {
+        return redirectToSignIn();
+    }
+
+    const server = await db.server.findUnique({
+        where: {
+            id: params.serverId,
+            members: {
+                some: {
+                    profileId: profile.id,
+                },
+            },
+        },
+        include: {
+            channels: {
+                where: {
+                    name: "general"
+                },
+                orderBy: {
+                    createdAt: "asc"
+                }
+            },
+        },
+    });
+
+    const inistailChannel = server?.channels[0];
+
+    if (inistailChannel?.name !== "general") {
+        return null;
+    }
+
+    return redirect(`/servers/${params?.serverId}/channels/${inistailChannel?.id}`);
 }
 export default ServerIdPage;
\ No newline at end of file
diff --git a/components/server/server-channel.tsx b/components/server/server-channel.tsx
index 85fede3..c7ec64d 100644
--- a/components/server/server-channel.tsx
+++ b/components/server/server-channel.tsx
@@ -5,7 +5,7 @@ import { Channel, ChannelType, MemberRole, Server } from "@prisma/client";
 import { Edit, Hash, Lock, Mic, Trash, Video } from "lucide-react";
 import { useParams, useRouter } from "next/navigation";
 import { ActionTooltip } from "@/components/action-tooltip";
-import { useModal } from "@/hooks/use-modal-store";
+import { ModalType, useModal } from "@/hooks/use-modal-store";
 
 interface ServerChannelProps {
     channel: Channel;
@@ -30,9 +30,18 @@ export const ServerChannel = ({
 
     const Icon = iconMap[channel.type];
 
+    const onClick = () => {
+        router.push(`/servers/${params?.serverId}/channels/${channel.id}`);
+    }
+
+    const onAction = (e: React.MouseEvent, action: ModalType) => {
+        e.stopPropagation();
+        onOpen(action, { channel, server });
+    }
+
     return (
         <button
-            onClick={() => {}}
+            onClick={onClick}
             className={cn(
                 "group px-2 py-2 rounded-md flex items-center gap-x-2 w-full hover:bg-zinc-700/10 dark:hover:bg-zinc-700/50 transition mb-1",
                 params?.channelId === channel.id && "bg-zinc-700/10 dark:bg-zinc-700"
@@ -49,13 +58,13 @@ export const ServerChannel = ({
                 <div className="ml-auto flex items-center gap-x-2">
                     <ActionTooltip label="Edit">
                         <Edit
-                            onClick={() => onOpen("editChannel", {channel, server})}
+                            onClick={(e) => onAction(e, "editChannel")}
                             className="hidden group-hover:block w-4 h-4 text-zinc-500 hove:text-zinc-600 dark:text-zinc-400 dark:hove:text-zinc-300 transition"
                         />
                     </ActionTooltip>
                     <ActionTooltip label="Delete">
                         <Trash 
-                            onClick={() => onOpen("deleteChannel", {channel, server})}
+                            onClick={(e) => onAction(e, "deleteChannel")}
                             className="hidden group-hover:block w-4 h-4 text-zinc-500 hove:text-zinc-600 dark:text-zinc-400 dark:hove:text-zinc-300 transition"
                         />
                     </ActionTooltip>
diff --git a/components/server/server-member.tsx b/components/server/server-member.tsx
index a1b8ba2..4e11eed 100644
--- a/components/server/server-member.tsx
+++ b/components/server/server-member.tsx
@@ -25,11 +25,18 @@ export const ServerMember = ({
     server
 }: ServerMemberProps) => {
     const params = useParams();
-    //const router = useRouter();
+    const router = useRouter();
 
     const icon = roleIconMap[member.role];
+
+    const onClick = () => {
+        router.push(`/servers/${params?.serverId}/conversations/${member.id}`);
+    }
+
     return (
-        <button className={cn(
+        <button
+            onClick={onClick}        
+            className={cn(
             "group px-2 py-2 rounded-md flex items-center gap-x-2 w-full hover:bg-zinc-700/10 dark:hover:bg-zinc-700/50 transition mb-1",
             params?.memberId === member.id && "bg-zinc-700/20 dark:bg-zinc-700"
         )}>