diff --git a/app/View/Components/NamespaceComponent.php b/app/View/Components/NamespaceComponent.php
new file mode 100644
index 0000000..e5eb7e8
--- /dev/null
+++ b/app/View/Components/NamespaceComponent.php
@@ -0,0 +1,36 @@
+<?php
+
+namespace App\View\Components;
+
+use Illuminate\View\Component;
+
+class NamespaceComponent extends Component
+{
+    public $name;
+    public $color;
+    public $key;
+    public $description;
+
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct($name,$color, $key, $description)
+    {
+        $this->name = $name;
+        $this->color = $color;
+        $this->key = $key;
+        $this->description = $description;
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\View\View|string
+     */
+    public function render()
+    {
+        return view('components.namespace-component');
+    }
+}
diff --git a/resources/views/components/namespace-component.blade.php b/resources/views/components/namespace-component.blade.php
new file mode 100644
index 0000000..c9ad00f
--- /dev/null
+++ b/resources/views/components/namespace-component.blade.php
@@ -0,0 +1,22 @@
+<div
+    class="relative flex items-center w-full px-2 transition-all duration-200 transform mini-card lg:max-w-md first:ml-4 last:pr-6 hover:-translate-y-4">
+<div class="flex flex-col h-full overflow-hidden bg-white border-2 border-{{$color}}-500 rounded-lg w-full">
+        <div class="flex justify-center px-4 pt-4">
+            <div class="flex flex-wrap items-center -mb-2">
+            <a href="{{route('namespaces.show', $key)}}"
+            class="MvAamu inline-block text-md tracking-wide py-2 px-12 bg-{{$color}}-500 text-white rounded-md mr-2 mb-2 transform transition-all duration-100 ease-in-out hover:bg-orange-50 border-2 border-gray-100 hover:border-{{$color}}-500 hover:text-{{$color}}-700"
+            style="font-weight: 100;">{{$name}}</a>
+            </div>
+        </div>
+
+         <a href="{{route('namespaces.show', $key)}}" class="relative block h-full px-4 py-4"
+            style="min-height:auto;">
+            <div class="leading-7 ">
+            <p class="MvTyper text-center" style="direction: rtl;">{{$description}}</p>
+            </div>
+        </a>
+
+
+    </div>
+    
+</div>
\ No newline at end of file
diff --git a/resources/views/namespaces/index.blade.php b/resources/views/namespaces/index.blade.php
index c9c71ee..5d3a973 100644
--- a/resources/views/namespaces/index.blade.php
+++ b/resources/views/namespaces/index.blade.php
@@ -21,33 +21,14 @@
 <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2 mb-10">
 
     @foreach (config('karudhaas.topic_filters') as $key => $namespace)
-    <div
-    class="relative flex items-center w-full px-2 transition-all duration-200 transform mini-card lg:max-w-md first:ml-4 last:pr-6 hover:-translate-y-4">
-<div class="flex flex-col h-full overflow-hidden bg-white border-2 border-{{$namespace['color']}}-500 rounded-lg w-full">
-        <div class="flex justify-center px-4 pt-4">
-            <div class="flex flex-wrap items-center -mb-2">
-            <a href="{{route('namespaces.show', $key)}}"
-            class="MvAamu inline-block text-md tracking-wide py-2 px-12 bg-{{$namespace['color']}}-500 text-white rounded-md mr-2 mb-2 transform transition-all duration-100 ease-in-out hover:bg-orange-50 border-2 border-gray-100 hover:border-{{$namespace['color']}}-500 hover:text-{{$namespace['color']}}-700"
-                    style="font-weight: 100;">{{$namespace['dv_name']}}</a>
-            </div>
-        </div>
-
-         <a href="{{route('namespaces.show', $key)}}" class="relative block h-full px-4 py-4"
-            style="min-height:auto;">
-            <div class="leading-7 ">
-            <p class="MvTyper text-center" style="direction: rtl;">{{$namespace['description']}}</p>
-            </div>
-        </a>
-
-
-    </div>
-    
-</div>
+        <x-namespace-component 
+        :color="$namespace['color']" 
+        :name="$namespace['dv_name']"
+        :key="$key"
+        :description="$namespace['description']"
+        ></x-namespace-component>
     @endforeach
 
-   
-
-
 
 </div>
 @endsection
\ No newline at end of file
diff --git a/resources/views/namespaces/show.blade.php b/resources/views/namespaces/show.blade.php
index b835003..ea60483 100644
--- a/resources/views/namespaces/show.blade.php
+++ b/resources/views/namespaces/show.blade.php
@@ -1,7 +1,7 @@
 @extends('layouts.app')
 
 @section('content')
-<topic-filter topics="{{implode(',',$namespace['keys']) }}" label="{{$namespace['dv_name']}}" :per_page="12"
-    color="border-{{$namespace['color']}}-500">
+<topic-filter topics="{{implode(',',$namespace['keys']) }}"
+label="{{$namespace['dv_name']}}" :per_page="12" color="border-{{$namespace['color']}}-500">
 </topic-filter>
 @endsection
\ No newline at end of file