diff --git a/src/routers/index.tsx b/src/routers/index.tsx
index 5d6ae3e..338cc62 100644
--- a/src/routers/index.tsx
+++ b/src/routers/index.tsx
@@ -1,6 +1,6 @@
 import {BrowserRouter, Route, Routes, Navigate} from 'react-router-dom';
 import {ProtectedRoute} from 'components';
-import {LoginForm, ChannelList} from 'views';
+import {LoginForm, ChannelList, ChannelDetail} from 'views';
 
 export default function Router() {
   return (
@@ -12,7 +12,7 @@ export default function Router() {
         {/* Protected routes */}
         <Route path="/" element={<Navigate to="/channels" replace />} />
         <Route path="/channels" element={<ProtectedRoute component={<ChannelList />} />} />
-
+        <Route path="/channels/:channelId" element={<ProtectedRoute component={<ChannelDetail />} />} />
         {/* Fallback route */}
         <Route path="*" element={<Navigate to="/login" replace />} />
       </Routes>
diff --git a/src/views/ChannelDetail/ChannelDetail.tsx b/src/views/ChannelDetail/ChannelDetail.tsx
new file mode 100644
index 0000000..4a4fcea
--- /dev/null
+++ b/src/views/ChannelDetail/ChannelDetail.tsx
@@ -0,0 +1,5 @@
+import { JSX } from 'react';
+
+export function ChannelDetail(): JSX.Element {
+    return <div>ChannelDetail</div>;
+}
\ No newline at end of file
diff --git a/src/views/ChannelDetail/index.ts b/src/views/ChannelDetail/index.ts
new file mode 100644
index 0000000..07e929d
--- /dev/null
+++ b/src/views/ChannelDetail/index.ts
@@ -0,0 +1 @@
+export * from './ChannelDetail';
\ No newline at end of file
diff --git a/src/views/ChannelList/ChannelList.tsx b/src/views/ChannelList/ChannelList.tsx
index a87f799..1695b69 100644
--- a/src/views/ChannelList/ChannelList.tsx
+++ b/src/views/ChannelList/ChannelList.tsx
@@ -102,12 +102,14 @@ export const ChannelList = (): React.JSX.Element => {
     );
   }
 
+  if (isFetching) {
+    return <ChannelListLoading />;
+  }
+
   return (
     <div>
       <Body className="table-container">
-        {isFetching ? (
-          <ChannelListLoading />
-        ) : channels.length === 0 ? (
+        {channels.length === 0 ? (
           <Main>
             <div style={{textAlign: 'center', padding: '2rem'}}>
               <h3>No channels found</h3>
diff --git a/src/views/index.ts b/src/views/index.ts
index b8e2cba..3b89a15 100644
--- a/src/views/index.ts
+++ b/src/views/index.ts
@@ -1,2 +1,3 @@
 export * from './LoginForm';
 export * from './ChannelList';
+export * from './ChannelDetail';
