diff --git a/shimatta_kenkyusho/parts/qr_parser.py b/shimatta_kenkyusho/parts/qr_parser.py
index 7b40ef8..4e5020d 100644
--- a/shimatta_kenkyusho/parts/qr_parser.py
+++ b/shimatta_kenkyusho/parts/qr_parser.py
@@ -2,7 +2,7 @@ from django.core.exceptions import ValidationError, ObjectDoesNotExist
 from django.urls import reverse as url_reverse
 import re
 
-from .models import Storage
+from .models import Storage, Component
 
 class QrCode:
     prefix = ''
@@ -17,7 +17,8 @@ class QrCode:
 class QrCodeValidator:
 
     qr_patterns = {
-        'stor_uuid': QrCode('stor_uuid', 'parts-stocks-detail', Storage)
+        'stor_uuid': QrCode('stor_uuid', 'parts-stocks-detail', Storage),
+        'comp_uuid': QrCode('comp_uuid', 'parts-components-detail', Component),
     }
 
     def __init__(self):
diff --git a/shimatta_kenkyusho/parts/urls.py b/shimatta_kenkyusho/parts/urls.py
index 95fe1f7..0070fab 100644
--- a/shimatta_kenkyusho/parts/urls.py
+++ b/shimatta_kenkyusho/parts/urls.py
@@ -10,4 +10,5 @@ urlpatterns = [
     path('changepw/', parts_views.ChangePasswordView.as_view(), name='change-pw'),
     path('stocks/<slug:uuid>/', parts_views.StockViewDetail.as_view(), name='parts-stocks-detail'),
     path('components/<slug:uuid>/', parts_views.ComponentDetailView.as_view(), name='parts-components-detail'),
+    path('packages/<slug:uuid>/', parts_views.PackageDetailView.as_view(), name='parts-packages-detail'),
 ]
diff --git a/shimatta_kenkyusho/parts/views.py b/shimatta_kenkyusho/parts/views.py
index 0d4b99f..561bbb9 100644
--- a/shimatta_kenkyusho/parts/views.py
+++ b/shimatta_kenkyusho/parts/views.py
@@ -392,7 +392,20 @@ class ComponentDetailView(LoginRequiredMixin, BaseTemplateMixin, DetailView):
         context = super().get_context_data(**kwargs)
         context['component'] = self.object
 
-        
+
 
         return context
+
+class PackageDetailView(LoginRequiredMixin, BaseTemplateMixin, DetailView):
+    template_name = 'parts/packages-detail.html'
+    model = Package
+    pk_url_kwarg = 'uuid'
+    base_title = ''
+    navbar_selected = 'Components'
     
+    def get_context_data(self, **kwargs):
+        self.base_title = 'Package / '+self.object.name
+        context = super().get_context_data(**kwargs)
+        context['package'] = self.object
+ 
+        return context
diff --git a/shimatta_kenkyusho/static/css/shimatta-kenkyusho-base.css b/shimatta_kenkyusho/static/css/shimatta-kenkyusho-base.css
index 7fd86f3..ded557a 100644
--- a/shimatta_kenkyusho/static/css/shimatta-kenkyusho-base.css
+++ b/shimatta_kenkyusho/static/css/shimatta-kenkyusho-base.css
@@ -3,4 +3,28 @@
  */
 .asteriskField {
     display: none;
-}
\ No newline at end of file
+}
+
+.component-img-big {
+    max-width: 200px;
+    max-height: 200px;
+}
+
+.component-img-small {
+    max-width: 64px;
+    max-height: 64px;
+}
+
+.component-img-def-big {
+    width: 200px;
+    max-height: 200px;
+}
+
+.component-img-def-small {
+    width: 64px;
+    max-height: 64px;
+}
+
+.component-img-huge {
+    max-width: 500px;
+}
diff --git a/shimatta_kenkyusho/static/js/add-stock-modal.js b/shimatta_kenkyusho/static/js/add-stock-modal.js
index 6b8d489..87ec682 100644
--- a/shimatta_kenkyusho/static/js/add-stock-modal.js
+++ b/shimatta_kenkyusho/static/js/add-stock-modal.js
@@ -28,6 +28,9 @@ function fill_add_stock_modal_component(data) {
 
 new AutocompleteCustomUi('add-stock-search', 'add-stock-search-ac-dropdown', 
 function(search, autocomplete_obj) {
+    if (search.startsWith('[comp_uuid]')) {
+        search = search.replace('[comp_uuid]', '');
+    }
     api_search_component(search, function(results) {
         components = results.results;
         var test = [];
diff --git a/shimatta_kenkyusho/templates/parts/components-detail.html b/shimatta_kenkyusho/templates/parts/components-detail.html
index e369929..e21a2eb 100644
--- a/shimatta_kenkyusho/templates/parts/components-detail.html
+++ b/shimatta_kenkyusho/templates/parts/components-detail.html
@@ -1,8 +1,45 @@
 {% extends 'base.html' %}
+{% load static %}
+{% load qr_code %}
 
 {% block content %}
 <div class="container">
-    Meow
-    {{component}}
+    <div class="col-md-3">
+        <div class="row justify-content-center">
+            {% if component.get_resolved_image %}
+                <img src="{{component.get_resolved_image}}" alt="{{component.name}}" class="component-img-big btn" data-bs-toggle="modal" data-bs-target="#comp-img-modal">
+            {% else %}
+                <img src="{% static 'css/icons/card-image.svg' %}" alt="{{component.name}}" class="component-img-def-big">
+            {% endif %}
+        </div>
+        <div class="row">
+            {% qr_from_text component.get_qr_code size="m" image_format="svg" %}
+        </div>
+    </div>
 </div>
+
+{% if component.get_resolved_image %}
+<div class="modal fade" id="comp-img-modal" tabindex="-1">
+    <div class="modal-dialog modal-lg modal-fullscreen-lg-down">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5>{{component.name}}</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <div class="text-center">
+                    <img class="component-img-huge" src="{{component.get_resolved_image}}">
+                </div>
+                {% if not component.image %}
+                    <hr>
+                    <div class="alert alert-warning">
+                        Component doesn't have an image. The image is inherited from its package.
+                    </div>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+</div>
+{% endif %}
+
 {% endblock content %}
\ No newline at end of file
diff --git a/shimatta_kenkyusho/templates/parts/components.html b/shimatta_kenkyusho/templates/parts/components.html
index aa98c2a..ef5a4e4 100644
--- a/shimatta_kenkyusho/templates/parts/components.html
+++ b/shimatta_kenkyusho/templates/parts/components.html
@@ -11,10 +11,10 @@
                     <li class="list-group-item list-group-item-action d-flex align-items-center">
                         <div class="flex-shrink-0">
                             {% if comp.get_resolved_image %}
-                                <img src="{{comp.get_resolved_image}}" style="max-width:64px;max-height:64px;" alt="{{ comp.name }}" class="mr-3">
+                                <img src="{{comp.get_resolved_image}}" class="component-img-small" alt="{{ comp.name }}" class="mr-3">
                             {% else %}
                                 {% load static %}
-                                <img src="{% static 'css/icons/card-image.svg' %}" style="width:64px;max-height:64px;" alt="{{ comp.name }}" class="mr-3">
+                                <img src="{% static 'css/icons/card-image.svg' %}" class="component-img-def-small" alt="{{ comp.name }}" class="mr-3">
                             {% endif %}
                         </div>
                         <div class="flex-grow-1 ms-3">
@@ -35,14 +35,15 @@
         </div>
         <div class="col-md">
             <h2>Packages</h2>
-            {% for pkg in packages %}
+                {% for pkg in packages %}
+                <a href="{% url 'parts-packages-detail' uuid=pkg.id %}" class="text-decoration-none">
                     <li class="list-group-item list-group-item-action d-flex align-items-center">
                         <div class="flex-shrink-0">
                             {% if pkg.image %}
-                                <img src="{{pkg.image.url}}" style="max-width:64px;max-height:64px;" alt="{{ pkg.name }}" class="mr-3">
+                                <img src="{{pkg.image.url}}" class="component-img-small" alt="{{ pkg.name }}" class="mr-3">
                             {% else %}
                                 {% load static %}
-                                <img src="{% static 'css/icons/card-image.svg' %}" style="width:64px;max-height:64px;" alt="{{ pkg.name }}" class="mr-3">
+                                <img src="{% static 'css/icons/card-image.svg' %}" class="component-img-def-small" alt="{{ pkg.name }}" class="mr-3">
                             {% endif %}
                         </div>
                         <div class="flex-grow-1 ms-3">
@@ -53,6 +54,7 @@
                             Pin Count: {{pkg.pin_count}}
                         </div>
                     </li>
+                </a>
                 {% endfor %}
             </div>
             {% include 'paginator.html' with paginator=packages get_param='pkg_page' aria_label='Package Page Navigation' %}
diff --git a/shimatta_kenkyusho/templates/parts/packages-detail.html b/shimatta_kenkyusho/templates/parts/packages-detail.html
new file mode 100644
index 0000000..ed21f33
--- /dev/null
+++ b/shimatta_kenkyusho/templates/parts/packages-detail.html
@@ -0,0 +1,8 @@
+{% extends 'base.html' %}
+
+{% block content %}
+<div class="container">
+    Meow<br>
+    {{package}}
+</div>
+{% endblock content %}
\ No newline at end of file
diff --git a/shimatta_kenkyusho/templates/parts/stocks-detail.html b/shimatta_kenkyusho/templates/parts/stocks-detail.html
index 7e2eed9..dd3e47d 100644
--- a/shimatta_kenkyusho/templates/parts/stocks-detail.html
+++ b/shimatta_kenkyusho/templates/parts/stocks-detail.html
@@ -69,7 +69,7 @@
                             {% endif %}
                         </div>
                         <div class="flex-grow-1 ms-3">
-                            <h6 class="mt-0 text-primary">{{ stock.component.name }}</h6>
+                            <h6 class="mt-0 text-primary"><a href="{% url 'parts-components-detail' uuid=stock.component.id %}" class="text-decoration-none">{{ stock.component.name }}</a></h6>
                             {% if stock.component.package %}
                                 Package: {{stock.component.package}}<br>
                             {% endif %}